Accordion 2

by Ben Clayton

HTML

<div class="accordion-panel group-1 closed">
  <div class="accordion-button">+</div>
  <h2>Heading 1</h2>
  <div class="close-marker"></div>
  <div class="accordion-body">
  <h5>A bmnbn mnb mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bmn bm b</h5>
  <h5>B bmnbn mnb mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bmn bm b</h5>
  <h5>C bmnbn mnb mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn bmnb nbm bm mnb  nbmn...

CSS

.accordion-panel {
  border: 1px solid gray;
  padding: 0px 10px;
  margin-bottom: 30px;
}

.accordion-panel .accordion-body {
  -webkit-transition: max-height 1s; 
  -moz-transition: max-height 1s; 
  -ms-transition: max-height 1s; 
  -o-transition: max-height 1s; 
  transition: max-height 1s;  
  max-height:default;
  height:default;
}

.accordion-panel h1 {
  display: inline: block;
}

.accordion-button {
  display: inline: block;
  float: right;
  font-size: 40px;
}

.accordion-panel.closed .accordion-body {
  max-height: 0px;
  height:0px;
  overflow:hidden;
}

JavaScript

$(document).ready(function() {
  $(".accordion-panel").each(function() {
    $(this).find(".accordion-button").on('click', function() {
      var $wrap = $(this).closest(".accordion-panel");
      if ($wrap.hasClass('closed')) {
        $wrap.removeClass('closed')
      } else {
        $wrap.addClass('closed')
      }
    });
  });
})