"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> -
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
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