A nested accordion is used to organize complex data into simply collapsible panels. Such a way enhances the user experience to browse the information provided in a nested accordion. The nested accordion may contain a step-by-step guide, FAQs, or instructions about a specific topic. Here, you will learn how to create a nested accordion using HTML, CSS, and JavaScript.
How to Create Nested Accordion In JavaScript
1. First of all, create the HTML structure for the nested accordion as follows:
<!-- start mobile menu -->
<div class="mobile-expertise-faq">
<div>
<p class="mobile-faq-menu">Freight + Delivery</p>
<div class="mobile-faq-panel">
<div class="expertise-faq">
<h3 class="faq">FREIGHT + DELIVERY</h3>
<div style="border-bottom: solid #f4f4f4 1px;">
<p class="faq-accordion" style="padding: 18px 18px 6px; margin: 12px 0">When will my order arrive?</p>
<div class="faq-panel">
<p class="faq-panel" style="margin-top: 1.25em; margin-bottom: 2.5em">Delivery time on Bobux orders differs across locations. To make sure your order gets to you, ensure your address is complete and spelt correctly. <br><br> Orders placed within New Zealand should be delivered within 1-2 business days from the time the order is placed. For urban addresses, we offer next-day delivery on orders placed before 12pm. Please allow up to two additional days for delivery to rural addresses. During sale periods and public holidays, delivery times are subject to extend. A physical address is required for all orders, Bobux cannot ship to NZ PO boxes. </p>
</div>
</div>
</div>
</div>
<div>
<p class="mobile-faq-menu">Shoe Care</p>
<div class="mobile-faq-panel">
<div class="expertise-faq">
<h3 class="faq">SHOE CARE</h3>
<div style="border-bottom: solid #f4f4f4 1px;">
<p class="faq-accordion" style="padding: 18px 18px 6px; margin: 12px 0">What's the best way to care for my suede shoes? Do they need waterproofing?</p>
<div class="faq-panel">
<p class="faq-panel" style="margin-top: 1.25em; margin-bottom: 2.5em">Before the suede shoes have been worn, apply a suitable waterproofing spray. This will greatly reduce the risk of liquid stains. </p>
</div>
<p class="faq-accordion" style="padding: 15px 18px; margin: 0">What's the best way to clean my pair of Bobux shoes?</p>
<div class="faq-panel">
<p class="faq-panel" style="margin-top: 1.25em; margin-bottom: 2.5em">Because Bobux shoes are made from a variety of leathers and textiles, there’s no one-size-fits-all care method. Different shoes have different care needs, so to find out how your pair are best looked after, please see our <a href="shoe-care">Care Instructions guide</a>.</p>
</div>
<p class="faq-accordion" style="padding: 15px 18px; margin: 0">My shoes are scuffed - what can I do? </p>
<div class="faq-panel">
<p class="faq-panel" style="margin-top: 1.25em; margin-bottom: 2.5em">Leather shoes can be particularly prone to scuffing if they come into contact with an abrasive surface. A natural shoe polish such as beeswax can be used to keep leather soft and protected to prevent scuffing and can also be used to reduce the appearance of light scuff marks and rejuvenate the overall appearance of leather. A colour-matched polish can be used to mask more prominent scuff marks. If you find your child’s shoes are showing excessive scuffing, this could be because they’re in shoes that aren’t suitable to their stage of development or their shoes don’t fit them correctly. If your child’s shoes are too big for them, the shoes are more likely to drag on the ground and cause your child to trip up. Refer to FAQ sections Ranges and Sizing to find out how you can make sure your child is in the best shoes for their feet. To find out more about how to look after your Bobux shoes, please refer to our <a href="shoe-care">Care Instructions guide</a>. </p>
</div>
</div>
</div>
</div>
</div>
<div>
<p class="mobile-faq-menu">Returns + Faults</p>
<div class="mobile-faq-panel">
<div class="expertise-faq">
<h3 class="faq">RETURNS + FAULTS</h3>
<div style="border-bottom: solid #f4f4f4 1px;">
<p class="faq-accordion" style="padding: 18px 18px 6px; margin: 12px 0">Can I return my purchase?</p>
<div class="faq-panel">
<p class="faq-panel" style="margin-top: 1.25em; margin-bottom: 2.5em">If you’re unhappy with the size, style or quality of your Bobux shoes, you can return the shoes to us in original, unused condition within 28 days from the date of purchase. We can offer an exchange or a full refund. If you purchased your Bobux shoes from a store and would like to return or exchange them, you must do so through the store directly. We are unable to offer exchanges or returns for shoes that have been purchased through resell sites such as Trade Me or eBay. </p>
</div>
</div>
</div>
</div>
</div>
<div>
<p class="mobile-faq-menu">Range</p>
<div class="mobile-faq-panel">
<div class="expertise-faq">
<h3 class="faq">RANGE</h3>
<div style="border-bottom: solid #f4f4f4 1px;">
<p class="faq-accordion" style="padding: 18px 18px 6px; margin: 12px 0"> Which range is right for my child?</p>
<div class="faq-panel">
<p class="faq-panel" style="margin-top: 1.25em; margin-bottom: 2.5em">At Bobux, we divide our ranges by stage of development, not age, as every child is different.
<ul>
<li><strong>• Sitting / Crawling</strong>: The Bobux Soft Sole range is best suited to children who are yet to find their feet. They may be sitting, crawling and perhaps starting to cruise. As our Soft Soles feature a porous, flexible suede sole, they are suitable for indoor wear. You can find our range of <a href="baby">Soft Soles here</a>.</li> <br>
<li><strong>• Cruising / Learning to walk</strong>: The Bobux Xplorer is perfect for this stage of development. Super flexible and lightweight with a scuff-resistant toecap, the Xplorer is great for kids who are sometimes crawling, sometimes walking. You can find our <a href="catalogsearch/result/?q=xplorer">Xplorer range here</a>.</li> <br>
<li><strong>• New to walking</strong>: The Bobux Step Up range is designed for kids at this developmental stage. Flexible and lightweight with added durability for first-walkers, Step Up styles are perfect for kids who are walking most of the time, but still developing confidence on their feet. You can find our <a href="walking">Step Up range here</a>.</li> <br>
<li><strong>• Confident walkers, runners and jumpers</strong>: The Bobux I-Walk and Kid+ ranges are designed for active toddlers, preschoolers and school-aged kids. These shoes are designed in line with foot health best-practice and provide the durability needed to withstand the extreme activities kids get up to. Styles in the Play range feature scuff-resistant toecaps, advanced textiles, and high-performance soles specifically for high-impact activities. You can find <a href="/toddler-preschooler">the I-Walk range herer</a>, and <a href="kids">the Kid+ range here</a>.</li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End mobile menu -->
2. Now, add the following CSS to style the nested accordion. You can set the custom CSS values in order to customize the accordion.
body {
font-family: brandon-grotesque, sans-serif;
font-style: normal;
font-weight: 400;
}
span {
padding-left: 15px;
}
.our-expertise h3 {
font-size: 1.5em;
&.faq {
margin: 1em 0;
text-align: left;
@include media(max-width $small-screen) {
margin-left: 20px;
}
}
}
.faq-container {
max-width: 1280px;
padding-bottom: 1.5em;
margin: 0 auto;
width: 90%;
}
.mobile-expertise-faq {
background-color: #f6f6f6;
}
p.mobile-faq-menu {
margin: auto;
padding: 20px;
border-bottom: solid #eeeeee 1px;
}
.expertise-faq {
width: 65%;
display: inline-block;
}
.contact-faq {
background: #f3f3f3;
height: 1000px;
width: 375px;
float: right;
display: inline-block;
@include media(max-width $large-screen) {
float: none;
display: block;
}
}
.mobile-faq {
}
/* Style the element that is used to open and close the accordion class */
p.faq-accordion {
background-color: #fff;
color: #444;
cursor: pointer;
padding: 18px 18px 0px;
width: 100%;
text-align: left;
outline: none;
transition: 0.4s;
margin-bottom: 0px;
border-top: solid #f4f4f4 1px;
font-weight: 700;
}
/* Add a background color to the accordion if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
p.faq-accordion.active, p.accordion:hover {
background-color: #fff;
}
/* Unicode character for "plus" sign (+) */
p.faq-accordion:after {
content: '+';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
p.mobile-faq-menu:after {
content: '+';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
/* Unicode character for "minus" sign (-) */
p.faq-accordion.active:after {
content: "-";
}
p.mobile-faq-menu.active:after {
content: "-";
}
/* Style the element that is used for the panel class */
div.faq-panel {
padding: 5px 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
text-align: left;
padding-left: 18px;
max-width: 580px;
margin: 5px 0px;
}
div.faq-panel.show {
opacity: 1;
max-height: 750px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}
div.mobile-faq-panel {
padding: 5px 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
text-align: left;
padding-left: 18px;
}
div.mobile-faq-panel.show {
opacity: 1;
max-height: 750px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}
3. Finally, add the following JavaScript function before closing the body tag to initialize the accordion.
document.addEventListener("DOMContentLoaded", function(event) {
var acc = document.getElementsByClassName("faq-accordion");
var panel = document.getElementsByClassName('faq-panel');
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses) {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
}
function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i++) {
els[i].classList[fnName](className);
}
}
});
document.addEventListener("DOMContentLoaded", function(event) {
var acc = document.getElementsByClassName("mobile-faq-menu");
var panel = document.getElementsByClassName('mobile-faq-panel');
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses) {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
}
function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i++) {
els[i].classList[fnName](className);
}
}
});
That’s all! hopefully, you have successfully created a nested accordion. If you have any questions or suggestions, feel free to comment below.
