SlideToggle jQuery function

Question

I am trying to display a paragraph of text, and then below - the “read further” link, when I click the link, more text should move down and the link text should read “Read less”, then when they click on this text, it is assumed that the text will be copied, and the link text will again be "Read more".

$('#more').click(function() { $('#the_more').slideToggle("slow", function () { $('#more').html("Read Less"); }); }); 

Anyone having a problem?

Answer 1

From my comment:

Well, the wording changes only in one direction, so it will never return to "Read More." Other than that, it would be nice to see the HTML that accompanies this.

Here is what code might work, expecting to see HTML.

 $('#more').click(function() { $('#the_more').slideToggle("slow", function () { $('#more').text(function (index, text) { return (text == 'Read More' ? 'Read Less' : 'Read More'); }); }); return false; }); 

Demo: http://jsfiddle.net/yLvms/

The code works as follows.

• A click event is tied to the #more element when a function is clicked.
• When launched, the #the_more element moves up or down, switches, depending on the state of visibility.
• The callback is triggered when slideToggle() , which changes the text.
• The text in #the_more modified using a functional variant of the function . text () , this passes the current text value to the function to change.
• A text function is just a trernary-if that checks the current value of the text inside #the_more , and if it is currently “Read More” becomes “Read Less” and vice versa, switching the text.

Hope this helps.