jQuery show hide content and Changing links

Question

On some of my company page i want to use show and hide toggle details while click on links.

I used .toggle() but....

But here is minor issue , while User click on Show more content should slide down and more important this text 'Show more' should be change to "Show less" and this should be toggle. I hope you are clear what I really need.

Thanks

Answer 1

John McCollum basically has your answer, but you could also make use of Javascript shorthand to make your code a little more compact:

$('#toggle').click(function(ev) { 
    $('#content').toggle(); 
    this.html(($('#toggle').text() == 'Show more') ? 'Show less' : 'Show more');
 })

EDIT: For clarity, I'll also add the html markup you need for the above code to work. In this example, everything is shown to start with.

<p><a id="toggle" href="#">Show less</a></p>
<div id="content"><!-- your stuff goes here. --></div>

If you want it to be hidden to start with, you simply change the link text to "Show more" and add the following style rule to your stylesheet:

#content { display: none; }