jQuery Collapsible Panel

by Ben Clayton

HTML

<div class="search section collapsible-panel">
  <div class="toolbuttons">
    <button class="minim cp-closed"></button>
  </div>
  <div class="cp-header">TITLE</div>
  <div class="cp-body cp-start-closed">
    Body text is all hidden when this panel collapases ...
  </div>
</div>
<div class="search section collapsible-panel">
  <div class="toolbuttons">
    <button class="minim cp-closed"></button>
  </div>
  <div class="cp-header">TITLE</div>
  <div class="cp-body cp-start-closed">
    Body text is all hidden when this panel collapases ...
  </div>
</div>

<div class="search section collapsible-panel">
  <div class="toolbuttons">
    <button class="minim cp-closed"></button>
  </div>
  <div class="cp-header">TITLE</div>
  <div class="cp-body cp-start-closed">
    <div class="search sub-section collapsible-panel">
      <div class="toolbuttons">
        <button class="minim cp-closed"></button>
      </div>
      <div class="cp-header">CHILD TITLE</div>
      <div class="cp-body cp-start-closed">
        Body text is all hidden when this panel collapases ...
      </div>
    </div>
  </div>
</div>

CSS

.search.section,
.search.sub-section {
	width: 50%;
	margin: 0 auto;
	display: inline-block;
  border: 1px solid red;
	border-radius: 8px;
	vertical-align: top;
  position: relative;
  margin-bottom:20px;
}
.search.sub-section {
  width: 100%;
}

.search.section .cp-header {
  margin-left: 20px;
} 

.search.section .cp-body {
  padding: 20px;
} 

.toolbuttons {
  position: absolute;
  right: 4px;
  height: 10px;
}



/* Collapsible panel styling */
.collapsible-panel input.button {
	width: 10px;
  height: 10px;
}
.collapsible-panel .minim {
	border: 0 solid;
	background-color: #ffffff;
	padding: 10px;
}

.collapsible-panel .minim::after {
  font-size: 1rem;
	color: blue;
  width: 10px;
  height: 10px;
  display: block;
}
.collapsible-panel .minim.cp-open::after {
	content: '-';
}
.collapsible-panel .minim.cp-closed::after {
	content: '+';
}
.collapsible.cp-start-closed {
  display: none;
}

JavaScript

$(document).on('click', '.collapsible-panel button.minim', function() {
  // debugger;
  var $pannel = $(this).closest(".collapsible-panel"); 
  var $pbody = $pannel.find('.cp-body').first();  // 'first'  stops you hitting children
  if ($pbody.is(":visible")) { 
    $pbody.slideUp('slow');
    $(this).removeClass('cp-open').addClass("cp-closed");
  } else {
    $pbody.slideDown('slow');
    $(this).removeClass('cp-closed').addClass("cp-open");
  }
});