how to jquery Show and hide div on the button click

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • April 14, 2014 at 11:44 am #4922
    Site Default
    Member

    I have two div elements associated with button means each div contains a its button for ‘show/hide’ functionality.

    <input type="button" id="btn1" value="Show/Hide" /> 
<div id="panel1" class="pnl1"></div>

<input type="button" id="btn2" value="Show/Hide" /> 
<div id="panel2" class="pnl1"></div>

    I am using the javascript as :

    $('#panel1,#panel2').hide();

$('#btn1').click(function(){
 $('#panel1').fadeOut();
});

$('#btn2').click(function(){
 $('#panel2').fadeOut();
});

    this code hide only. And after hiding div how I can show again on the same button’s click.

    April 14, 2014 at 1:57 pm #4925
    Hirendra Sisodiya
    Keymaster

    You can use fadeToggle() jquery method to show and hide the div with fade effect.

    $('#panel1,#panel2').hide();

$('#btn1').click(function(){
 $('#panel1').fadeToggle( "slow", "linear" );
});

$('#btn2').click(function(){
 $('#panel2').fadeToggle( "slow", "linear" );
});
  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.