"Read more" button
-
Hi Armin!
In a page of my site I have a long text and I wish it was fully visible only when you click a "Read more" button.
I first tried a pair of plug-in (Wp show more, Collapse-O-Matic), but they didn't work because the inclusion of texts in Lay Theme is different from the classic mode of Wordpress themes.
So I tried to insert a button through the codes, and the only system that seems to work is this:
https://codepen.io/devkick/pen/soJpyHTML and CSS parts work well, but I can't integrate the Js part. I paste the Js code in "Custom <head> content", in a script tag and put "JQuery" instead of "$", but it still does not work.
Original script:
$(".readmore").on('click touchstart', function(event) {
var txt = $(".more-content").is(':visible') ? 'Show more (+)' : 'Less (–)';
$(this).parent().prev(".more-content").toggleClass("visible");
$(this).html(txt);
event.preventDefault();
});My version:
<script>
jQuery(".readmore").on('click touchstart', function(event) {
var txt = jQuery(".more-content").is(':visible') ? 'Show more (+)' : 'Less (–)';
jQuery(this).parent().prev(".more-content").toggleClass("visible");
jQuery(this).html(txt);
event.preventDefault();
});
</script>My page: http://fabrizioinglese.com/bio-di-prova
Did I do something wrong?
Is there another way to insert the button?I hope you give me a solution!
Thanks for the help and for the theme,Marta
-
Hey Marta sorry for my late response. As written here http://laytheme.com/documentation.html#binding-click-events you need to bind clicks a bit differently.
<script> jQuery(document).on("click touchstart", ".readmore", function(event) { var txt = jQuery(".more-content").is(':visible') ? 'Show more (+)' : 'Less (–)'; jQuery(this).parent().prev(".more-content").toggleClass("visible"); jQuery(this).html(txt); event.preventDefault(); }); </script> -
Don't worry!
I didn't write the code correctly.
Thank you very much, now it works perfectly!Merry Christmas Armin!
Marta
-
Merry Christmas to you too :)
-
@arminunruh Dear Armin,
Lay Theme is awesome.Is there today a possibility for a "read more" button?
The Link is invalid, unfortunately.Best regards
-
yo just use the new "accordion" feature:
https://www.instagram.com/p/ClBAFnUD-tG/ -
@arminunruh Best video ever! thx
Need custom programming for your Lay Theme site?
I regularly add new features to Lay Theme for free, based on user feedback. But if you or your client need something more specific, I’m happy to offer custom paid programming tailored to your project.
Email info@laytheme.com with the subject "Custom paid programming for Lay Theme" and a short description of what you need — I’ll reply with a cost estimate.
Custom features I build often make it into future Lay Theme updates, so your idea might benefit the whole community.
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it