Question

I am showing/hiding DIVs like this:

HTML:

<a href="#" class="showhide" source="one"> Show/Hide </a>
<div id="one"></div>

<a href="#" class="showhide" source="two"> Show/Hide </a>
<div id="two"></div>

jQuery:

jQuery('.showhide').live( 'click' , function () {
    source = $(this).attr("source");
    $( '#' + source ).slideToggle( 'slow' );
    return false;
});

Above code is working for me.

Now I want to ask 2 things:

• How can I change text ‘Show/Hide’ to Show when Div is closed and Hide when DIV is open?

• How can I hide all these DIVs when page is loaded first time?

Any improvements in above code are also appreciated.

Thanks.

Answer 1

You could use the callback function within the slideToggle to change the text according to the :visible selector.

As for hiding the div, with your current markup a simple next().hide(); should solve that.

jQuery('.showhide').live( 'click' , function () {
    $(this).next().slideToggle( 'slow',function(){
        $(this).prev().text(function(){
         if ($(this).next().is(":visible")) return "Hide"; 
           else return "Show"; 
        });  
    } );
    return false;
}).next().hide();

example: http://jsfiddle.net/niklasvh/pdcxs/