This specific accordion does not rely on any JavaScript programming.
The concept behind it is that the status of each content container is governed by the state of the input. The input can be a checkbox, allowing for multiple selections, or a radio button, permitting only one selection at a time. These inputs are categorized by the name property.
HTML
<div class="wrapper">
<div class="tab grey">
<input id="tab-0" type="checkbox" name="tabs"> <!-- change the input type to radio if you want only one accordion panel open -->
<label for="tab-0">
<!-- Insert the title text for the accordion here -->
</label>
<div class="tab-content grey">
<!-- Your content goes here -->
</div>
</div>
<!-- repeat as many tabs as desired -->
</div>
The essential functions I believe should receive priority are explained within the following code comments below
CSS
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #fff;
overflow: hidden;
}
input {
/* this hides the input element */
position: absolute;
opacity: 0;
z-index: -1;
}
label {
position: relative;
display: flex;
padding: 0 0 0 0.3em;
background: #16a085;
font-weight: bold;
line-height: 2.5;
cursor: pointer;
font-size: 1.5em;
}
.tab-content {
/* default setting is invisible (height: 0) */
max-height: 0;
overflow: auto;
background: #1abc9c;
transition: max-height .35s;
}
/* :checked */
input:checked ~ .tab-content {
/* increase height if adjacent tab's input is checked */
max-height: 25em;
}
/* Custom Icon styling - adds visual feedback when content is visible or hidden */
label::after {
position: absolute;
right: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
transition: all .35s;
}
input[type=checkbox] + label::after {
content: "+";
}
input[type=radio] + label::after {
content: "\25BC";
}
input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
transform: rotateX(180deg);
}
With some CSS customization, this design could easily transform into a tabbed layout.