Read More/Read Less Button

[wb_user]

can i make like this in wb? https://www.w3schools.com/howto/howto_js_read_more.asp

[BaconFries]

See the following:

Here are two templates which demonstrate this functionality:
http://www.wysiwygwebbuilder.com/suppor ... louds.html
http://www.wysiwygwebbuilder.com/suppor ... inter.html

Maybe this extension will be of use.
viewtopic.php?f=42&t=75719

[wb_user]

See the following:

Here are two templates which demonstrate this functionality:
http://www.wysiwygwebbuilder.com/suppor ... louds.html
http://www.wysiwygwebbuilder.com/suppor ... inter.html

Maybe this extension will be of use.
viewtopic.php?f=42&t=75719

thanks!
i see the examples ( the extension page not open) , I think this option not support in wb and I should use custom code. is this possible to make this work only with CSS without JavaScript? in demo's that use .js file for this work.

[Pablo]

is this possible to make this work only with CSS without JavaScript?

This cannot be done without JavaScript.

[wb_user]

is this possible to make this work only with CSS without JavaScript?

This cannot be done without JavaScript.

I have a long text and try to Show it shorter on the site.
After the Read More/Read Less option, Do you have a solution?

[Pablo]

Did you try the solutions mentioned by BaconFries?

https://www.wysiwygwebbuilder.com/support/wb12tryouts/wb12_clouds.html
https://www.wysiwygwebbuilder.com/support/wb12tryouts/wb12_winter.html

[wb_user]

Did you try the solutions mentioned by BaconFries?

https://www.wysiwygwebbuilder.com/support/wb12tryouts/wb12_clouds.html
https://www.wysiwygwebbuilder.com/support/wb12tryouts/wb12_winter.html

yes that use JavaScript i try to find lightweight method

[crispy68]

I may have an extension for you that uses only CSS that I once was working on but I will need to dig thru my extension archives to confirm it's up to snuff in releasing.

[bkjohns]

I use Events that show/hide text as a Read More... option. Works well if you are using flexible / responsive layouts (layout grid, flexbox). A little effort involved but once you figure it out it works fine for me. Might be worth looking into.

[wb_user]

I may have an extension for you that uses only CSS that I once was working on but I will need to dig thru my extension archives to confirm it's up to snuff in releasing.

why you do not complete the extension? that is useful for page SEO without Disturbing the visitor

[wb_user]

I use Events that show/hide text as a Read More... option. Works well if you are using flexible / responsive layouts (layout grid, flexbox). A little effort involved but once you figure it out it works fine for me. Might be worth looking into.

can you send your page to I see what you done?

[crispy68]

why you do not complete the extension?

I have many little projects I've started. Sometimes you just decide others get the focus and others fall by the wayside. Not sure it being CSS oriented vs. javascript has anything to do with SEO though. Most Read More buttons use javascript that I've seen.

[crispy68]

@wb_user

I've put together a quick demo you can view here.

I should have the extensions available in another day for download.

[zinc]

@wb_user

I've put together a quick demo you can view here.

I should have the extensions available in another day for download.

Lovely stuff (as usual)!!

[Bluesman]

@wb_user

I've put together a quick demo you can view here.

I should have the extensions available in another day for download.

Very nice crispy !!! Do you make it work with events?

[crispy68]

@bluesman,

No, it does not use events. Is that something you are wanting?

[zinc]

Would event even work here in terms of UX? also what would you do on mobiles?

[bkjohns]

I use Events that show/hide text as a Read More... option. Works well if you are using flexible / responsive layouts (layout grid, flexbox). A little effort involved but once you figure it out it works fine for me. Might be worth looking into.

can you send your page to I see what you done?

https://we.tl/t-EENJ86j5nz

[wb_user]

@wb_user

I've put together a quick demo you can view here.

I should have the extensions available in another day for download.

great! the demo is very nice and it not load any jQuery or any .js file I will wait for that

[wb_user]

I use Events that show/hide text as a Read More... option. Works well if you are using flexible / responsive layouts (layout grid, flexbox). A little effort involved but once you figure it out it works fine for me. Might be worth looking into.

can you send your page to I see what you done?

https://we.tl/t-EENJ86j5nz

You did a great job. i check the code and sadly, it use JavaScript (.js) files for show/hide the text.
look at this image :


when you use this method, wb create and use some js files for show/hide the text and certainly this work effect on page loading time.
please see @crispy68 demo (https://webbuildertemplates.com/extensi ... e-css.html) it not use any js file. for that reason the page is loading time is perfect.

[Bluesman]

@bluesman,

No, it does not use events. Is that something you are wanting?

Hi crispy... not dead important, but it would be nice to have a smoth slide down when activate the read more... or slide up when close...

[crispy68]

it would be nice to have a smooth slide down when activate the read more... or slide up when close..

Agreed but unfortunately, I would have to use javascript and the original poster didn't want to use javascript only css.

I may consider a javascript option and will look to add that functionality.

[Bluesman]

it would be nice to have a smooth slide down when activate the read more... or slide up when close..

Agreed but unfortunately, I would have to use javascript and the original poster didn't want to use javascript only css.

I may consider a javascript option and will look to add that functionality.

You're the best!!
And I hope you will charge for this extension... I will surely pay for it

[BaconFries]

With WWB18 being released in the near future and its approach to using more Bootstrap over jQuery here is a demo of a read more / less using Bootstrap. The example is from stackoverflow. Yes it is using scripts rather than just css just showing out of interest for all to see.
https://stackoverflow.com/questions/220 ... s-on-click

[crispy68]

@bluesman,

it would be nice to have a smooth slide down when activate the read more... or slide up when close...

So, unfortunately there is not a foolproof way to get it working using just CSS. After many hours and reading a lot about if it's even possible, this is why you need to use javascript plain and simple. However, I was sort of able to get it working using sort of a CSS hack. It should work for the most part but I can't guarantee there couldn't be a situation where it misbehaves. So, I made the smooth slide an option in the extension where you can turn it off or on. If off, it should work without a hitch.... I think .

So it may be another day or so before I release it since I spent a ton of time on trying to get this to work. So stay tuned.

I have updated the demo (see link on first page) so you can see the normal (1st example) and the slide version (2nd & 3rd example).

@bacon,
thanks for the link. I may look into that as an option down the road.

[Bluesman]

@bluesman,

it would be nice to have a smooth slide down when activate the read more... or slide up when close...

So, unfortunately there is not a foolproof way to get it working using just CSS. After many hours and reading a lot about if it's even possible, this is why you need to use javascript plain and simple. However, I was sort of able to get it working using sort of a CSS hack. It should work for the most part but I can't guarantee there couldn't be a situation where it misbehaves. So, I made the smooth slide an option in the extension where you can turn it off or on. If off, it should work without a hitch.... I think .

So it may be another day or so before I release it since I spent a ton of time on trying to get this to work. So stay tuned.

I have updated the demo (see link on first page) so you can see the normal (1st example) and the slide version (2nd & 3rd example).

@bacon,
thanks for the link. I may look into that as an option down the road.

Very nice slide and fade effect Wirth testing. Waiting for the release... tnx crispy for your effort.

[wb_user]

@bluesman,

it would be nice to have a smooth slide down when activate the read more... or slide up when close...

So, unfortunately there is not a foolproof way to get it working using just CSS. After many hours and reading a lot about if it's even possible, this is why you need to use javascript plain and simple. However, I was sort of able to get it working using sort of a CSS hack. It should work for the most part but I can't guarantee there couldn't be a situation where it misbehaves. So, I made the smooth slide an option in the extension where you can turn it off or on. If off, it should work without a hitch.... I think .

So it may be another day or so before I release it since I spent a ton of time on trying to get this to work. So stay tuned.

I have updated the demo (see link on first page) so you can see the normal (1st example) and the slide version (2nd & 3rd example).

@bacon,
thanks for the link. I may look into that as an option down the road.

it work perfectly

[wb_user]

and finally come
thanks for your work, @crispy68
https://www.wysiwygwebbuilder.com/forum ... hp?t=95843

[Bluesman]

Great Tnx crispy!

[zinc]

Superb work as always. Thank you, Ron,!