<div class="accordion" id="accordion" role="presentation">
<div id="committee-name" class="accordion__item has-shadow">
<div class="accordion__item-header" role="heading">
<button class="accordion__toggle" aria-expanded="false" aria-controls="panel-129200269-0" id="heading-129200269-0" type="button">
<h3 class="heading heading--small">committee name</h3>
<svg id="accordion__toggle-trigger-129200269-0" class="accordion__toggle-trigger" viewbox="0 0 24 24" width="24">
<path id="plus-129200269-0" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
<path id="minus-129200269-0" d="M4.18 11.28h15.43v2H4.18z"/>
</svg>
</button>
</div>
<div class="accordion__item-content" id="panel-129200269-0" role="region" aria-labelledby="heading-129200269-0" aria-hidden="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Ipsen is a leading biopharmaceutical group dedicated to improving lives through innovative medicines in
oncology , neuroscience and rare diseases.
</div>
</div>
<div id="committee-name" class="accordion__item has-shadow">
<div class="accordion__item-header" role="heading">
<button class="accordion__toggle" aria-expanded="false" aria-controls="panel-129200269-1" id="heading-129200269-1" type="button">
<h3 class="heading heading--small">committee name</h3>
<svg id="accordion__toggle-trigger-129200269-1" class="accordion__toggle-trigger" viewbox="0 0 24 24" width="24">
<path id="plus-129200269-1" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
<path id="minus-129200269-1" d="M4.18 11.28h15.43v2H4.18z"/>
</svg>
</button>
</div>
<div class="accordion__item-content" id="panel-129200269-1" role="region" aria-labelledby="heading-129200269-1" aria-hidden="true">
content 2
</div>
</div>
<div id="committee-name" class="accordion__item has-shadow">
<div class="accordion__item-header" role="heading">
<button class="accordion__toggle" aria-expanded="false" aria-controls="panel-129200269-2" id="heading-129200269-2" type="button">
<h3 class="heading heading--small">committee name</h3>
<svg id="accordion__toggle-trigger-129200269-2" class="accordion__toggle-trigger" viewbox="0 0 24 24" width="24">
<path id="plus-129200269-2" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
<path id="minus-129200269-2" d="M4.18 11.28h15.43v2H4.18z"/>
</svg>
</button>
</div>
<div class="accordion__item-content" id="panel-129200269-2" role="region" aria-labelledby="heading-129200269-2" aria-hidden="true">
content 3
</div>
</div>
<div id="region" class="accordion__item has-shadow">
<div class="accordion__item-header" role="heading">
<button class="accordion__toggle" aria-expanded="false" aria-controls="panel-129200269-3" id="heading-129200269-3" type="button">
<h3 class="heading heading--small">region</h3>
<svg id="accordion__toggle-trigger-129200269-3" class="accordion__toggle-trigger" viewbox="0 0 24 24" width="24">
<path id="plus-129200269-3" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
<path id="minus-129200269-3" d="M4.18 11.28h15.43v2H4.18z"/>
</svg>
</button>
</div>
<div class="accordion__item-content" id="panel-129200269-3" role="region" aria-labelledby="heading-129200269-3" aria-hidden="true">
content 4
</div>
</div>
</div>
/* @accordion */
.accordion {
@include poly-padding-bottom--large;
width: 100%;
&__item {
cursor: pointer;
background-color: white;
@media (max-width: 767px) {
box-shadow: none !important;
margin-top: 0;
}
&:last-child {
border-bottom: none;
}
& + .accordion__item {
@include poly-margin-top;
}
&-header {
width: 100%;
button {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
outline: none;
position: relative;
padding-right: 30px;
padding-left: 10px;
@include poly-padding-y;
@media (min-width: 768px) {
@include poly-padding-x--large;
}
svg {
@include poly-margin-left;
flex-shrink: 0;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
@media (min-width: 768px) {
right: 3rem;
}
path {
fill: $azure-radiance;
@include themify($themes) {
fill: themed('ctaColor');
}
&:nth-of-type(2) {
visibility: hidden;
}
}
}
}
}
&.active {
.accordion__item-header {
}
}
&-content {
@include poly-padding-bottom--large;
padding-left: 10px;
padding-right: 10px;
display: none;
@media (min-width: 768px) {
@include poly-padding-x--large;
}
.page-link {
margin-top: $small-spacing;
}
}
}
}
/* accordion */
import $ from 'jquery'
// toggle accordions, obv
$(document).ready(function () {
if ($('.accordion').length) {
$('.accordion__item-header button').on('click', function (event) {
event.preventDefault()
var $clickedAnchor = $(this)
var $accordionItem = $clickedAnchor.closest('.accordion__item')
var $accordionItemContent = $accordionItem.find('.accordion__item-content')
var $plus = '#' + $accordionItem.find('[id^=plus]').attr('id')
var $minus = '#' + $accordionItem.find('[id^=minus]').attr('id')
if ($accordionItem.hasClass('active')) {
$clickedAnchor.attr('aria-expanded', 'false')
$accordionItemContent.attr('aria-hidden', 'true')
} else {
$clickedAnchor.attr('aria-expanded', 'true')
$accordionItemContent.attr('aria-hidden', 'false')
}
$accordionItem.toggleClass('active')
if ($accordionItem.hasClass('active')) {
TweenMax.to($plus, 0.3, {
morphSVG: { shape: $minus, shapeIndex: [3] },
ease: Power2.easeInOut
})
} else {
TweenMax.to($plus, 0.3, {
morphSVG: { shape: $plus, shapeIndex: [1] },
ease: Power2.easeInOut
})
}
$accordionItem.find('.accordion__item-content').slideToggle()
})
}
})