JQuery show hide content and link changes

Question

On some pages of my company, I want to use show and hide toggle details when I click on the links.

I used .toggle (), but ....

But here is a small problem, while the user clicks on Show more , the content should slide down, and more importantly, this text “Show more” should be changed to “ Show less ” and this should be switched. I hope you understand what I really need.

thanks

Answer 1

John McCallum basically has your answer, but you can also use shorthand Javascript 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 will also add the html markup you need for the above code to work. This example shows that everything starts 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 for starters, you simply change the link text to "Show more" and add the following style rule to the stylesheet:

 #content { display: none; } 

Answer 2

Create switch functions to set the text of your link and animate your content div

 $('a.toggle').toggle( function() { $('#contentDiv').slideDown(); $(this).html('Show less'); }, function() { $('#contentDiv').slideUp(); $(this).html('Show more'); } ); 

Answer 3

That should do it ...

HTML:

  <a href="#" id="expand"> <span class="linktext" >Show More</span> <span class="linktext" style="display:none">Show Less </span> </a> <div id="details" style="display:none"><h1>This is the details</h1></div> 

JavaScript:

 $('a#expand').click(function() { $('div#details').slideToggle(); $('span.linktext').toggle(); }); 

Answer 4

You can change the link value with id 'toggle' by following these steps:

HTML:

 <a href="#" id="toggle">Show More</a> 

jQuery (in your switch function):

 $('a#toggle').text('Show less'); 

Answer 5

You can hide and show elements using jquery hide() and show() , there is also a slideDown function.

so you shoot something like this onclick

 $("#showMore").click(function(){ $("#showMore").hide(); $("#showLess").show(); $("#contentDiv").slideDown(); } 

who should do this let me know if you have other questions.