how to jquery Show and hide div on the button click

Home Forums Web Development HTML, JavaScript and CSS how to jquery Show and hide div on the button click

Tagged: 

This topic contains 0 replies, has 2 voices, and was last updated by  Hirendra Sisodiya 4 years, 3 months ago.

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

    AdminC
    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.

    #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.