jQuery show hide content and Changing links

Question

Hello,

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

You can change the value of a link with id 'toggle' by doing the following:

HTML:

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

jQuery (within your toggle function):

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

Answer 2

you can hide and show elements with jquery hide() and show() functions, there is also a slideDown function.

so you would fire something like this onclick

$("#showMore").click(function(){

1) $("#showMore").hide();

2) $("#showLess").show();

4) $("#contentDiv").slideDown();

}

that should just about do it, let me know if you have any other questions

Answer 3

This 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

Create toggle 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 5

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.text(($('#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; }

Answer 6

The first solution seems to work but there is one little thing. What should I do if I want to display 'Show less' as the link not as the plain text. Everytime I hit Show more the text changes from link to simple text.