<div class="accordion -collapsed">
<button type="button" class="btn accordion-header js-accordion">
<h4 class="accordion-title">
<span class="text">General</span>
</h4>
</button>
<div class="accordion-content">
<div class="form-group">
<div class="form-field">
<label for="chrFieldName">Basic field</label>
<input type="text" name="chrFieldName">
</div>
</div>
</div>
</div>
<div class="accordion -collapsed">
<button type="button" class="btn accordion-header js-accordion">
<h4 class="accordion-title">
<span class="text">General</span>
</h4>
</button>
<div class="accordion-content">
<div class="form-group">
<div class="form-field">
<label for="chrFieldName">Basic field</label>
<input type="text" name="chrFieldName">
</div>
</div>
</div>
</div>
/* No context defined for this component. */
.accordion {
margin-top: 7.5rem;
transition: all $transition;
&:first-child {
margin-top: 0;
}
& + .accordion {
margin-top: 5px;
}
&.-collapsed {
.accordion-header {
background: $color-irma-offwhite;
&::after {
transform: translate(-50%, -50%) rotate(-90deg);
}
}
.accordion-content {
height: 0;
padding: 0 10rem;
}
}
.accordion-header {
position: relative;
display: flex;
width: 100%;
align-items: center;
height: 10rem;
padding: 0 8rem;
background: $color-irma-mint;
&::after {
content: '\f0d7';
position: absolute;
top: 50%;
left: 5rem;
transform: translate(-50%, -50%);
@include font-icon;
@include font-size-other(14px);
transition: all $transition;
}
.accordion-title {
text-transform: uppercase;
}
}
.accordion-content {
overflow: hidden;
padding: 7.5rem;
}
}
/*
* _accordion.js
*/
irma.accordion = (function () {
'use strict';
var init = function () {
$(document).on('click', '.js-accordion', function () {
$(this).closest('.accordion').toggleClass('-collapsed');
}).on('click', '.js-accordion-expand', function () {
var name = $(this).data().accordion;
var $accordions = $('.accordion-group').filter(function () {
return $(this).data().accordion == name;
}).find('.accordion');
$accordions.removeClass('-collapsed');
}).on('click', '.js-accordion-collapse', function () {
var name = $(this).data().accordion;
var $accordions = $('.accordion-group').filter(function () {
return $(this).data().accordion == name;
}).find('.accordion');
$accordions.addClass('-collapsed');
});
};
return {
init: init
};
}());
There are no notes for this item.