Add animation to bootstrap accordion while maintain proper plus minus sign

Question

I saw others sample have little problem where when you double click or click fast two times on the accordion, the panel will expand but the plus and minus sign will back to the plus sign instead of minus. For example this link: https://jsfiddle.net/esedic/mhu8rj3e/

Actual problem

Anyhow the plus minus sign for mine not happen but I do not have the animation/transition. How to add animation/transition to my bootstrap accordion using code snippet below? You notice that the box expand too fast.

$("#filter-button").click(function() {
  $(this).toggleClass("active");
  $('#filter-body').slideToggle(100);
});

button.accordion {
    background-color: #d7f2bc;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #addf7f;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
	font-size: 22px;
}

button.accordion.active:after {
    content: "\2212";
}

.accordion-panel {
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 20px;
    border: 1px solid #addf80;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.filter-box {
	border-radius: 0;
}

.filter-body {
	border: 1px solid #addf80;
	padding: 10px 0;
	transition: height 0.2s ease-out;
	width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="panel-group filter-box transition" id="accordion">
							
<button class="accordion" id="filter-button" data-toggle="collapse" data-parent="#accordion">Filter</button>

<div id="filter-body" class="panel-collapse collapse">
  <div class="panel-body filter-body">
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="datefrom">Date From</label>
        <input id="datefrom" name="datefrom" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="dateto">Date To</label>
        <input id="dateto" name="dateto" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

$("#filter-button").click(function() {
  $(this).toggleClass("active");
  $('#filter-body').slideToggle(100);
});

button.accordion {
    background-color: #d7f2bc;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #addf7f;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
	font-size: 22px;
}

button.accordion.active:after {
    content: "\2212";
}

.accordion-panel {
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 20px;
    border: 1px solid #addf80;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.filter-box {
	border-radius: 0;
}

.filter-body {
	border: 1px solid #addf80;
	padding: 10px 0;
	transition: height 0.2s ease-out;
	width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="panel-group filter-box transition" id="accordion">
							
<button class="accordion" id="filter-button" data-toggle="collapse" data-parent="#accordion">Filter</button>

<div id="filter-body" class="panel-collapse collapse">
  <div class="panel-body filter-body">
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="datefrom">Date From</label>
        <input id="datefrom" name="datefrom" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="dateto">Date To</label>
        <input id="dateto" name="dateto" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
  </div>
</div>
</div>

Answer 2

If you want to add some animation to plus/minus sign you can use transition. do a copy of ::after as ::before and rotate it with transform.

$("#filter-button").click(function() {
  $(this).toggleClass("active");
  $('#filter-body').slideToggle();
});

button.accordion {
    background-color: #d7f2bc;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #addf7f;
}

button.accordion:after {
    content: '\2212';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
	font-size: 22px;
}

button.accordion.active:after {
    content: "\2212";
}

button.accordion:before {
    content: '\2212';
    color: #777;
    font-weight: bold;
    font-size: 22px;
    position: absolute;
    right: 18px;
    transform: rotate(0deg);
    transition: .3s all ease;
}

button.accordion.active:before {
    content: "\2212";
    transform: rotate(90deg);
}

.accordion-panel {
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 20px;
    border: 1px solid #addf80;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.filter-box {
	border-radius: 0;
}

.filter-body {
	border: 1px solid #addf80;
	padding: 10px 0;
	transition: height 0.2s ease-out;
	width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="panel-group filter-box transition" id="accordion">
							
<button class="accordion" id="filter-button" data-toggle="collapse" data-parent="#accordion">Filter</button>

<div id="filter-body" class="panel-collapse collapse">
  <div class="panel-body filter-body">
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="datefrom">Date From</label>
        <input id="datefrom" name="datefrom" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="dateto">Date To</label>
        <input id="dateto" name="dateto" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
  </div>
</div>
</div>

Answer 3

You can use slideToggle() on the #filter-body

You can also add duration inside that method

$("#filter-button").click(function() {
  $(this).toggleClass("active");
  $('#filter-body').slideToggle();
});

button.accordion {
    background-color: #d7f2bc;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #addf7f;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
	font-size: 22px;
}

button.accordion.active:after {
    content: "\2212";
}

.accordion-panel {
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 20px;
    border: 1px solid #addf80;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.filter-box {
	border-radius: 0;
}

.filter-body {
	border: 1px solid #addf80;
	padding: 10px 0;
	transition: height 0.2s ease-out;
	width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="panel-group filter-box transition" id="accordion">
							
<button class="accordion" id="filter-button" data-toggle="collapse" data-parent="#accordion">Filter</button>

<div id="filter-body" class="panel-collapse collapse">
  <div class="panel-body filter-body">
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="datefrom">Date From</label>
        <input id="datefrom" name="datefrom" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="dateto">Date To</label>
        <input id="dateto" name="dateto" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
  </div>
</div>
</div>

Or, you can replicate the behavior from your shared link. You just need to add all the attributes to the button. Toggling the class is not needed because bootstrap adds it by default.

See snippet below

$("#filter-button").click(function() {
  $(this).toggleClass("active");

});

button.accordion {
  background-color: #d7f2bc;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
}

button.accordion.active,
button.accordion:hover {
  background-color: #addf7f;
}

button.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  font-size: 22px;
}

button.accordion.active:after {
  content: "\2212";
}

.accordion-panel {
  background-color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  margin-bottom: 20px;
  border: 1px solid #addf80;
  border-radius: 0;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.filter-box {
  border-radius: 0;
}

#filter-body {
  border: 1px solid #addf80;
  padding: 10px 0;
  transition: 0.2s ease-out;
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="panel-group filter-box transition" id="accordion">

  <button class="accordion collapsed" id="filter-button" href="#filter-body" data-toggle="collapse" data-parent="#accordion" aria-expanded="true">Filter</button>

  <div id="filter-body" class="panel-collapse collapse" role="tabpanel">
    <div class="panel-body filter-body">
      <div class="col-lg-3">
        <div class="filter-group">
          <label for="datefrom">Date From</label>
          <input id="datefrom" name="datefrom" type="text" class="datetimepicker" readonly="readonly" />
        </div>
      </div>
      <div class="col-lg-3">
        <div class="filter-group">
          <label for="dateto">Date To</label>
          <input id="dateto" name="dateto" type="text" class="datetimepicker" readonly="readonly" />
        </div>
      </div>
    </div>
  </div>
</div>