JQuery element shows and slide down when button is clicked

Question

So, I'm learning jQuery / JavaScript. I believe the title says that all attempts to get the div section that is set to display: none show while slowly sliding to the button

According to the jQuery tutorial, W3schools and other small places I tried to read, this is what I came up with. Needless to say, this does not look very pretty.

My logic is that the code should execute when the click button is clicked. I put the onclick event handler in the button element.

 function showPackages(){ $('#submitBtn').on('click', function(){ $('#showPackages').slideDown('slow', function(){ $('#showPackages').css('display', 'inline'); }); }); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="panel-group" id="dispPackages" style="display: none"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> Collapsible Group 1</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> Collapsible Group 2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> </div> 

Any help / advice is appreciated.

Answer 1

First of all, you need to separate the bind event handlers.

 function showPackages(){ $('#submitBtn').on('click', function(){ $('#showPackages').slideDown('slow', function(){ $('#showPackages').css('display', 'inline'); }); }); } 

When you click every time you click on input, it attaches a click event handler to your submitBtn .

Change it like this:

 function showPackages(){ } $('#submitBtn').on('click', function(){ }); $('#showPackages').slideDown('slow', function(){ $('#showPackages').css('display', 'inline'); }); 

But if you want to automatically trigger an event, use the .trigger() method.

 function showPackages(){ $('#submitBtn').trigger('click'); $('#showPackages').trigger('slideDown'); } 

Answer 2

Try

show and hide using various effects

• hide () and show ()
• fadeIn (), fadeOut () and fadeToggle ()
• slideUp (), slideDown () and slideToggle ()

* In your case, you want a slide effect, so just use slideToggle ()

 $('#submitBtn').on('click', function(){ //$('#dispPackages').slideToggle('slow') this will set display:block $('#dispPackages').slideToggle('slow').css("display","inline-block"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <button id="submitBtn">clickhere</button> <div class="panel-group" id="dispPackages" style="display: none"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> Collapsible Group 1</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> Collapsible Group 2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> </div>