When you click the read more, the read less button shows and that is fine. But if you click show more on more than two, it doesn’t show the read less on the second one - ugh.
Please someone help me with this and suggest what I could do to improve me jQuery
My explanations are not the best so here is a little video:
Sorry, there are some auto-formatting issues with the quotations here. Replace the quotation marks in my solution with new single or double quotation marks.
$(".read-more").on("click", function (e) {
var txt = $(this).text() === "Read Less <<" ? "Read More >>" : "Read Less <<";
$(this).text(txt);
$(this).next('.more-content').slideToggle(200);
//Prevent Issues from happeing.
e.preventDefault();
});
});
//The e in the the function ()
$(".read-more").on("click", function (e) {
//This at the bottom
e.preventDefault();
Using preventDefault() on an event stops its default behavior. In jQuery, the default behavior of a click event is to navigate somewhere via the ‘href’ property. If no href property is provided, it will navigate to the top of the page as its default action. You can stop this behavior by calling preventDefault() on the event object (which you have done).