<ul class="c-accordion">
<li class="c-accordion__item">
<button class="c-accordion__header is-open">
<span class="c-accordion__header-title">Item 1</span>
</button>
<div class="c-accordion__content">
<ul class="o-grid o-grid--auto">
</ul>
</div>
</li>
<li class="c-accordion__item">
<button class="c-accordion__header">
<span class="c-accordion__header-title">Item 2</span>
</button>
<div class="c-accordion__content">
<ul class="o-grid o-grid--auto">
</ul>
</div>
</li>
<li class="c-accordion__item">
<button class="c-accordion__header">
<span class="c-accordion__header-title">Item 3</span>
</button>
<div class="c-accordion__content">
<ul class="o-grid o-grid--auto">
</ul>
</div>
</li>
</ul>
<ul class="c-accordion">
{{#each item}}
<li class="c-accordion__item{{#if noCounter}} c-accordion__item--no-counter{{/if}}">
<button class="c-accordion__header{{#if open}} is-open{{/if}}">
<span class="c-accordion__header-title">{{itemTitle}}</span>
</button>
<div class="c-accordion__content">
<ul class="o-grid o-grid--auto">
{{#each checks}}
<li>
<input type="checkbox" id="{{checksId}}">
<label for="{{checksId}}">{{checksLabel}}</label>
</li>
{{/each}}
</ul>
</div>
</li>
{{/each}}
</ul>
{
"item": [
{
"itemTitle": "Item 1",
"itemContent": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum a ab quae quas optio ut officia quia? Modi at impedit dolorem est voluptatem facilis, beatae atque tenetur, soluta dolorum inventore sapiente laborum. Alias esse soluta porro distinctio aperiam, qui suscipit.",
"open": "yes"
},
{
"itemTitle": "Item 2",
"itemContent": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum a ab quae quas optio ut officia quia? Modi at impedit dolorem est voluptatem facilis, beatae atque tenetur, soluta dolorum inventore sapiente laborum. Alias esse soluta porro distinctio aperiam, qui suscipit."
},
{
"itemTitle": "Item 3",
"itemContent": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum a ab quae quas optio ut officia quia? Modi at impedit dolorem est voluptatem facilis, beatae atque tenetur, soluta dolorum inventore sapiente laborum. Alias esse soluta porro distinctio aperiam, qui suscipit."
}
]
}
.c-accordion {
list-style-type: none;
}
.c-accordion__item {
position: relative;
counter-increment: step-counter;
&::before {
z-index: 10;
position: absolute;
padding: $space-xxxs 0 0 $space-xxs;
@include text-preset-4--sm;
color: $color-brand-secondary-900;
font-variant-numeric: lining-nums;
font-weight: 900;
content: counter(step-counter)'-';
}
& + & {
margin-top: $space-xs;
}
}
.c-accordion__item--no-counter {
counter-increment: none;
&::before {
content: none;
}
.c-accordion__header {
padding: $space-xxxs $space-xxxs $space-xxxs $space-xxs;
}
}
.c-accordion__header {
display: block;
position: relative;
width: 100%;
padding: $space-xxxs $space-xxxs $space-xxxs rem(26);
border: 0;
border-radius: $global-radius;
background-color: $color-grey-200;
text-align: left;
cursor: pointer;
transition: $global-transition;
@include hocus() {
background-color: darken($color-grey-200, 5%);
}
&::after {
display: block;
position: absolute;
top: 35%;
right: $space-md;
width: $space-xs;
height: $space-xs;
transform: rotate(135deg);
border-top: rem(2) solid;
border-left: rem(2) solid;
border-color: rgba($color-grey-600, 0.8);
content: '';
}
&.is-open {
background: lighten($color-grey-200, 2%);
&::after {
top: 30%;
transform: rotate(-135deg);
border-color: $color-grey-600;
}
}
}
// ACCORDION PLUGIN
.is-active {
.c-accordion__header {
background: lighten($color-grey-200, 2%);
&::after {
top: 30%;
transform: rotate(-135deg);
border-color: $color-grey-600;
}
}
}
.c-accordion__header-title {
@include text-preset-4--sm;
color: $color-brand-secondary-900;
}
.c-accordion__content {
display: none;
padding: $space-unit $space-xs;
> * + * {
margin-top: $space-unit;
}
.is-open + & {
display: block;
}
> * {
min-width: 100%;
}
}
var parentNav = document.querySelectorAll('.c-accordion .c-accordion__header');
for (var i = 0, l = parentNav.length; i < l; i++) {
parentNav[i].onclick = function() {
parentNav.forEach(function(elem) {
elem.classList.remove("is-open");
});
element = this;
if (element.classList.contains("is-open")) {
element.classList.remove("is-open");
} else {
element.classList.add("is-open");
}
return false;
}
}
There are no notes for this item.