how to jquery Show and hide div on the button click

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #4922

    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.

    #4925

    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" );
    });
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.