<div class="collapsable-panel">
    <h3 class="collapsable-panel__header js-collapsable-panel-header">Panel 1</h3>
    <div class="collapsable-panel__content js-collapsable-panel-content">
        Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
    </div>
</div>
<div class="collapsable-panel">
	<h3 class="collapsable-panel__header js-collapsable-panel-header">Panel 1</h3>
	<div class="collapsable-panel__content js-collapsable-panel-content">
		Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
	</div>
</div>
/* No context defined for this component. */
.collapsable-panel {} 
.collapsable-panel__header, 
.collapsable-panel__content {
  padding: 1em;
  background-color: $white;
}
.js .collapsable-panel__header {
  cursor: pointer;
  position: relative;
  background-image: url('/assets/icons/arrow-down-grey.png');
  background-image: url('/assets/icons/arrow-down-grey.svg');
  background-repeat: no-repeat;
  background-position: center right;
  padding-right: 2.5em;
  background-position-x: 97%;
  background-size: 18px;
  
}
.js .collapsable-panel__header--active {
  background-image: url('/assets/icons/arrow-up-darkgrey.png');
  background-image: url('/assets/icons/arrow-up-darkgrey.svg');
  background-repeat: no-repeat;
  background-position: center right;
  background-position-x: 97%;
  background-size: 18px;
}
.js .collapsable-panel__content {
  display: none;
}
.js .collapsable-panel__content--active {
  display: block;
}
$(document).ready(function() {
	$('.collapsable-panel').each(function() {
        var $this = $(this),
            header = $this.find('.js-collapsable-panel-header'),
            content = $this.find('.js-collapsable-panel-content');
            header.on('click', function() {
                header.toggleClass('collapsable-panel__header--active');
                content.toggleClass('collapsable-panel__content--active');  
            });      
    });
});

There are no notes for this item.