jQuery element show and slide down on button click

Question

So Im learning jQuery / JavaScript. I believe the title says it all trying to get a div section which is set to display: none show whilst slowly sliding down on button click

As per jQuery manual, W3schools and other few places where I've tried to read up, this is what I came up with. Needless to say it doesn't look pretty.

My logic here is that the code should get executed on button click hench I put the onclick event handler to 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 appreciated.

Answer 1

First of all, you have to bind event handlers separated.

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

As you writed every time when you click the input it attached a click event handler to your submitBtn.

Change it to this:

function showPackages(){

}
$('#submitBtn').on('click', function(){

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

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

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

Answer 2

Try this

show and hide can be done with different effects

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

*In your case you want 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>