Litehouse Create Accordions
Add accordions to your story
An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them.
1. Add a new code block
2. Open your Code Block and insert the following code snippet to add the accordion functionality
<button class="custom-nonfabl-accordion">Section 1</button>
<div class="custom-nonfabl-accordion-panel">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<button class="custom-nonfabl-accordion">Section 2</button>
<div class="custom-nonfabl-accordion-panel">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<button class="custom-nonfabl-accordion">Section 3</button>
<div class="custom-nonfabl-accordion-panel">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<style>
.custom-nonfabl-accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.custom-nonfabl-accordion + div.custom-nonfabl-accordion-panel {
height: 0px;
transition: height 1s ease-out 0.2s;
}
.accordion-active,
.custom-nonfabl-accordion:hover {
background-color: #ccc;
}
.accordion-active + div.custom-nonfabl-accordion-panel {
height: 60px;
}
.custom-nonfabl-accordion-panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
</style>
<script>
cb(function() {
let accordion = document.querySelectorAll(".custom-nonfabl-accordion");
for (let i = 0; i < accordion.length; i++) {
accordion[i].addEventListener("click", function() {
this.classList.toggle("accordion-active");
let panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
})
</script>
3. This is how the loaders will look like in View mode (in the published story)
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.