Accordion 1

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>
  <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 bmnb nbm bm mnb  nbmn bmnb nbm...

CSS

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

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

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

JavaScript

$(document).ready(function() {

  $(".accordion-panel").each(function() {
    var clfnd = false;
    var $abody;
    $(this).children().each(function() {
      debugger;
      console.log(this);
      if (clfnd === true) {
        debugger;
        var $el = $(this).detach();
        $abody.append($el);
      }

      if ($(this).hasClass('close-marker')) {
        debugger;
        clfnd = true;
        $abody = $(this).after("<div class='accordion-body'></div>");
      }

    })
  });

})