By Espina Studio
Suscribe to our newsletter & get early
access to new content.
Accordeons
Overview
Accordion is a card element that has collapsible content and can alternate between two states: opened and closed. Accordions can be stacked together, but only on at the time can be in an opened state.
Content goes here
<div class="col-12">
<!-- ACCORDION - GRAY -->
<div class="accordion acc acc-block acc-squared acc-gray" id="accordion-module-1">
<!-- ACCORDION LOOP CARD -->
<div class="card mt-30">
<div class="card-header" id="module-2">
<button class="acc-button collapsed" type="button" data-toggle="collapse" data-target="#module-collapse-2" aria-expanded="false" aria-controls="module-collapse-2">
<h2>
Accordion
</h2>
<svg class="icon-accordion-plus open-icon c-green" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#12695E"/>
<path d="M12.0713 6.5H13.0713V18.5H12.0713V6.5Z" fill="white"/>
<path d="M6.5 12.9286L6.5 11.9286L18.5 11.9286V12.9286L6.5 12.9286Z" fill="white"/>
</svg>
<svg class="icon-accordion-minus collapsed-icon c-green"" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#12695E"/>
<path d="M6.5 12.9287L6.5 11.9287L18.5 11.9287V12.9287L6.5 12.9287Z" fill="white"/>
</svg>
</button>
</div>
<div id="module-collapse-2" class="acc-body collapse" aria-labelledby="module-2" data-parent="#accordion-module-1">
<p>Content goes here</p>
</div>
</div>
<!-- END: ACCORDION LOOP CARD -->
</div>
<!-- END: ACCORDION - GRAY -->
</div>.acc {
// BASIC APPEARANCE STYLES FOR CLICKEABLE BUTTON
.acc-button {
display: flex;
align-items: center;
justify-content: space-between;
-webkit-appearance: none;
appearance: none;
border: transparent;
cursor: pointer;
background-color: transparent;
position: relative;
border: 1px solid transparent;
h2 {
padding-right: 15px;
}
&:focus {
outline: none;
}
}
// FULL WIDTH
&-block {
.acc-button {
width: 100%;
}
}
// BACKGROUND
&-gray {
.card-header,
.card-body {
background-color: $bg-gray;
}
.acc-button {
&::after {
background-color: $stroke-gray;
}
}
}
// STYLE TYPE - SQUARE
&-squared {
.acc-button {
padding: 31px 30px 27px;
border-radius: 4px;
text-align: left;
@include media-breakpoint-down(md) {
padding: 30px 30px 27px;
}
@include media-breakpoint-down(sm) {
padding: 21px 20px 19px;
}
&::after {
content: "";
position: absolute;
width: calc(100% - 60px);
height: 1px;
left: 50%;
bottom: 12px;
transform: translateX(-50%);
opacity: 1;
transition: opacity 0.2s ease;
@include media-breakpoint-down(md) {
bottom: 8px;
width: calc(100% - 30px);
left: 30px;
transform: translateX(0%);
}
@include media-breakpoint-down(sm) {
bottom: -2px;
width: calc(100% - 20px);
left: 20px;
}
}
&.collapsed {
&::after {
opacity: 0;
}
}
}
.acc-body {
.card-body {
padding: 16px 30px 27px;
border-radius: 4px;
@include media-breakpoint-down(sm) {
padding: 26px 20px 26px;
}
}
}
.acc-button[aria-expanded="true"] {
border-radius: 4px 4px 0 0;
}
.acc-body.show {
.card-body {
border-radius: 0 0 4px 4px;
}
}
&.acc-hover-rojo {
.acc-button {
transition: border-color .2s ease;
&.collapsed {
&:hover {
border-color: $rojo;
}
}
}
}
&.acc-hover-green {
.acc-button {
transition: border-color .2s ease;
&.collapsed {
&:hover {
border-color: $green;
}
}
}
}
}
// STYLE TYPE - BORDERS
&-border {
.acc-button {
padding: 15px 0px 13px;
text-align: left;
}
.acc-body {
.card-body {
padding: 12px 0px 15px;
}
}
// MODIFIERS
&-varsity {
.card {
&:not(:last-child) {
.acc-button {
border-bottom: 1px solid $varsity;
}
}
.acc-button:not(.collapsed) {
border-bottom: 1px solid $varsity;
}
}
.acc-button {
color: $varsity;
svg {
color: $varsity;
}
}
.acc-body {
.card-body {
border-bottom: 1px solid $varsity;
}
}
}
&-green {
.card {
&:not(:last-child) {
.acc-button {
border-bottom: 1px solid $green;
}
}
}
.acc-button {
color: $green;
svg {
color: $green;
}
}
.acc-body {
.card-body {
border-bottom: 1px solid $green;
}
}
}
&-gold {
.card {
&:not(:last-child) {
.acc-button {
border-bottom: 1px solid $gold;
}
}
.acc-button:not(.collapsed) {
border-bottom: 1px solid $gold;
}
}
.acc-button {
color: $gold;
svg {
color: $gold;
}
}
.acc-body {
.card-body {
border-bottom: 1px solid $gold;
}
}
}
&-gray {
.card {
&:not(:last-child) {
.acc-button {
border-bottom: 1px solid $stroke-gray;
}
}
.acc-button:not(.collapsed) {
color: $gold;
border-bottom: 1px solid $stroke-gray;
}
}
.acc-button {
color: $black;
svg {
color: $black;
}
}
.acc-body {
.card-body {
border-bottom: 1px solid $stroke-gray;
}
}
}
&-white {
.card {
&:not(:last-child) {
.acc-button {
border-bottom: 1px solid rgba($color: $white, $alpha: 0.3);
}
}
.acc-button:not(.collapsed) {
border-bottom: 1px solid rgba($color: $white, $alpha: 0.3);
}
}
.acc-button {
color: $white;
svg {
color: $white;
}
}
.acc-body {
.card-body {
border-bottom: 1px solid rgba($color: $white, $alpha: 0.3);
}
}
}
}
// SHOW/HIDE PLUS/MINUS ICONS WHEN COLLAPSED
.card-header {
.collapsed-icon {
display: block;
}
.open-icon {
display: none;
}
.collapsed {
svg.collapsed-icon {
display: none;
}
svg.open-icon {
display: block;
}
}
}
}
Content goes here
Content goes here
<div class="col-12">
<!-- ACCORDION - BORDER -->
<div class="accordion acc acc-block acc-border acc-border-varsity" id="accordion-border-module">
<!-- ACCORDION LOOP CARD -->
<div class="card mt-15">
<div class="card-header" id="border-1">
<button class="acc-button collapsed" type="button" data-toggle="collapse" data-target="#border-collapse-1" aria-expanded="false" aria-controls="border-collapse-1">
<h2>
Accordion #1
</h2>
<svg class="icon-accordion-line-plus open-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="6.5" width="1" height="14" fill="black"/>
<rect y="7.5" width="1" height="14" transform="rotate(-90 0 7.5)" fill="black"/>
</svg>
<svg class="icon-accordion-line-minus collapsed-icon" width="14" height="2" viewBox="0 0 14 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="1.5" width="1" height="14" transform="rotate(-90 0 1.5)" fill="black"/>
</svg>
</button>
</div>
<div id="border-collapse-1" class="acc-body collapse" aria-labelledby="border-1" data-parent="#accordion-border-module" style="">
<div class="card-body">
<div class="row">
<div class="col-12">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
</div>
<!-- END: ACCORDION LOOP CARD -->
<!-- ACCORDION LOOP CARD -->
<div class="card mt-15">
<div class="card-header" id="border-2">
<button class="acc-button collapsed" type="button" data-toggle="collapse" data-target="#border-collapse-2" aria-expanded="false" aria-controls="border-collapse-2">
<h2>
Accordion #2
</h2>
<svg class="icon-accordion-line-plus open-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="6.5" width="1" height="14" fill="black"/>
<rect y="7.5" width="1" height="14" transform="rotate(-90 0 7.5)" fill="black"/>
</svg>
<svg class="icon-accordion-line-minus collapsed-icon" width="14" height="2" viewBox="0 0 14 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="1.5" width="1" height="14" transform="rotate(-90 0 1.5)" fill="black"/>
</svg>
</button>
</div>
<div id="border-collapse-2" class="acc-body collapse" aria-labelledby="border-2" data-parent="#accordion-border-module">
<div class="card-body">
<div class="row">
<div class="col-12">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
</div>
<!-- END: ACCORDION LOOP CARD -->
</div>
<!-- END: ACCORDION - BORDER -->
</div>.acc {
// BASIC APPEARANCE STYLES FOR CLICKEABLE BUTTON
.acc-button {
display: flex;
align-items: center;
justify-content: space-between;
-webkit-appearance: none;
appearance: none;
border: transparent;
cursor: pointer;
background-color: transparent;
position: relative;
border: 1px solid transparent;
h2 {
padding-right: 15px;
}
&:focus {
outline: none;
}
}
// FULL WIDTH
&-block {
.acc-button {
width: 100%;
}
}
// BACKGROUND
&-gray {
.card-header,
.card-body {
background-color: $bg-gray;
}
.acc-button {
&::after {
background-color: $stroke-gray;
}
}
}
// STYLE TYPE - SQUARE
&-squared {
.acc-button {
padding: 31px 30px 27px;
border-radius: 4px;
text-align: left;
@include media-breakpoint-down(md) {
padding: 30px 30px 27px;
}
@include media-breakpoint-down(sm) {
padding: 21px 20px 19px;
}
&::after {
content: "";
position: absolute;
width: calc(100% - 60px);
height: 1px;
left: 50%;
bottom: 12px;
transform: translateX(-50%);
opacity: 1;
transition: opacity 0.2s ease;
@include media-breakpoint-down(md) {
bottom: 8px;
width: calc(100% - 30px);
left: 30px;
transform: translateX(0%);
}
@include media-breakpoint-down(sm) {
bottom: -2px;
width: calc(100% - 20px);
left: 20px;
}
}
&.collapsed {
&::after {
opacity: 0;
}
}
}
.acc-body {
.card-body {
padding: 16px 30px 27px;
border-radius: 4px;
@include media-breakpoint-down(sm) {
padding: 26px 20px 26px;
}
}
}
.acc-button[aria-expanded="true"] {
border-radius: 4px 4px 0 0;
}
.acc-body.show {
.card-body {
border-radius: 0 0 4px 4px;
}
}
&.acc-hover-rojo {
.acc-button {
transition: border-color .2s ease;
&.collapsed {
&:hover {
border-color: $rojo;
}
}
}
}
&.acc-hover-green {
.acc-button {
transition: border-color .2s ease;
&.collapsed {
&:hover {
border-color: $green;
}
}
}
}
}
// STYLE TYPE - BORDERS
&-border {
.acc-button {
padding: 15px 0px 13px;
text-align: left;
}
.acc-body {
.card-body {
padding: 12px 0px 15px;
}
}
// MODIFIERS
&-varsity {
.card {
&:not(:last-child) {
.acc-button {
border-bottom: 1px solid $varsity;
}
}
.acc-button:not(.collapsed) {
border-bottom: 1px solid $varsity;
}
}
.acc-button {
color: $varsity;
svg {
color: $varsity;
}
}
.acc-body {
.card-body {
border-bottom: 1px solid $varsity;
}
}
}
&-green {
.card {
&:not(:last-child) {
.acc-button {
border-bottom: 1px solid $green;
}
}
}
.acc-button {
color: $green;
svg {
color: $green;
}
}
.acc-body {
.card-body {
border-bottom: 1px solid $green;
}
}
}
&-gold {
.card {
&:not(:last-child) {
.acc-button {
border-bottom: 1px solid $gold;
}
}
.acc-button:not(.collapsed) {
border-bottom: 1px solid $gold;
}
}
.acc-button {
color: $gold;
svg {
color: $gold;
}
}
.acc-body {
.card-body {
border-bottom: 1px solid $gold;
}
}
}
&-gray {
.card {
&:not(:last-child) {
.acc-button {
border-bottom: 1px solid $stroke-gray;
}
}
.acc-button:not(.collapsed) {
color: $gold;
border-bottom: 1px solid $stroke-gray;
}
}
.acc-button {
color: $black;
svg {
color: $black;
}
}
.acc-body {
.card-body {
border-bottom: 1px solid $stroke-gray;
}
}
}
&-white {
.card {
&:not(:last-child) {
.acc-button {
border-bottom: 1px solid rgba($color: $white, $alpha: 0.3);
}
}
.acc-button:not(.collapsed) {
border-bottom: 1px solid rgba($color: $white, $alpha: 0.3);
}
}
.acc-button {
color: $white;
svg {
color: $white;
}
}
.acc-body {
.card-body {
border-bottom: 1px solid rgba($color: $white, $alpha: 0.3);
}
}
}
}
// SHOW/HIDE PLUS/MINUS ICONS WHEN COLLAPSED
.card-header {
.collapsed-icon {
display: block;
}
.open-icon {
display: none;
}
.collapsed {
svg.collapsed-icon {
display: none;
}
svg.open-icon {
display: block;
}
}
}
}All accordion cards should be inside an accordion wrapper. Only one accordion can be opened at the time.
If you open an accordion, all the other accordions inside the wrapper should autommaticaly close.
Copied to clipboard