<dl class="accordion">

    <dt class="accordion__header js-accordion-header">Panel 1</dt>
    <dd class="accordion__content js-accordion-content">
        Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
    </dd>

    <dt class="accordion__header js-accordion-header">Panel 2</dt>
    <dd class="accordion__content js-accordion-content">
        Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
    </dd>

    <dt class="accordion__header js-accordion-header">Panel 3</dt>
    <dd class="accordion__content js-accordion-content">
        <dl class="accordion">

            <dt class="accordion__header js-accordion-header">Panel 3-1</dt>
            <dd class="accordion__content js-accordion-content">
                Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
            </dd>

            <dt class="accordion__header js-accordion-header">Panel 3-2</dt>
            <dd class="accordion__content js-accordion-content">
                <dl class="accordion">

                    <dt class="accordion__header js-accordion-header">Panel 3-2-1</dt>
                    <dd class="accordion__content js-accordion-content">
                        Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
                    </dd>

                    <dt class="accordion__header js-accordion-header">Panel 3-2-2</dt>
                    <dd class="accordion__content js-accordion-content">
                        Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
                    </dd>
                </dl>
            </dd>

            <dt class="accordion__header js-accordion-header">Panel 3 -3 </dt>
            <dd class="accordion__content js-accordion-content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget
                blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
            </dd>
        </dl>
    </dd>
</dl>
<dl class="accordion">

	<dt class="accordion__header js-accordion-header">Panel 1</dt>
	<dd class="accordion__content js-accordion-content">
		Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
	</dd>

	<dt class="accordion__header js-accordion-header">Panel 2</dt>
	<dd class="accordion__content js-accordion-content">
		Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
	</dd>

	<dt class="accordion__header js-accordion-header">Panel 3</dt>
	<dd class="accordion__content js-accordion-content">
		<dl class="accordion">

			<dt class="accordion__header js-accordion-header">Panel 3-1</dt>
			<dd class="accordion__content js-accordion-content">
				Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
			</dd>

			<dt class="accordion__header js-accordion-header">Panel 3-2</dt>
			<dd class="accordion__content js-accordion-content">
				<dl class="accordion">

					<dt class="accordion__header js-accordion-header">Panel 3-2-1</dt>
					<dd class="accordion__content js-accordion-content">
						Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
					</dd>

					<dt class="accordion__header js-accordion-header">Panel 3-2-2</dt>
					<dd class="accordion__content js-accordion-content">
						Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
					</dd>
				</dl>
			</dd>

			<dt class="accordion__header js-accordion-header">Panel 3 -3 </dt>
			<dd class="accordion__content js-accordion-content">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis 
			vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
			</dd>
		</dl>
	</dd>
</dl>
/* No context defined for this component. */
.accordion {} 
.accordion__header, 
.accordion__content {
  padding: 1em;
  background-color: $white;
}
.accordion__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-size: 18px;
  background-position-x: 99%;
}
.accordion__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-size: 18px;
  background-position-x: 99%;
}
$(document).ready(function() {
	var allPanels = $('.js-accordion-content').hide();
    $('.js-accordion-header').on('click', function () {
        $this = $(this),
        $target = $this.next();
        if (!$target.hasClass('accordion__content--active')) {
        	$this.addClass('accordion__header--active');
        	$this.siblings('.js-accordion-header').removeClass('accordion__header--active');
            $this.parent().children('.js-accordion-content').removeClass('accordion__content--active').slideUp();
            $target.addClass('accordion__content--active').slideDown();
        }
        return false;
    });
});

There are no notes for this item.