Nested Accordion With Checkboxes Inside

Nested Accordion With Checkboxes Inside
Code Snippet:Nested Accordion with checkboxes
Author: alokag
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 914
License: MIT
Edit Code online: View on CodePen
Read More

This code implements a Nested Accordion With Checkboxes Inside. It allows users to expand and collapse sections of content with checkboxes. The major functionality is to toggle the “active” and “show” states of panels when the buttons are clicked, making it easier for users to select options.

This code is helpful for creating organized and interactive content sections with nested accordions and checkboxes.

How to Create Nested Accordion With Checkboxes Inside

1. Create an HTML structure with accordion containers and buttons for each section. Place your content and checkboxes inside the corresponding “panel” div. Customize the content and titles for each section to suit your needs.

<div class="accordion">
    <button class="accordion-btn"> <span>Cash Offers</span></button>
    <div class="panel">
        <button class="accordion-btn inner-accord"><span>Subscription</span></button>
        <div class="panel">
            <div class="content1"><input type="checkbox">Subscription</div>
        </div>
        <button class="accordion-btn inner-accord"><span>Auto Publish</span></button>
        <div class="panel">
            <div class="content1"><input type="checkbox">Cash Offers</div>
            <div class="content1"><input type="checkbox">Conditional Cash Offers</div>
            <div class="content1"><input type="checkbox">Cash Rebates</div>
            <div class="content1"><input type="checkbox">Conditional Cash Rebates</div>
            <div class="content1"><input type="checkbox">Formula Pricing Cash Offers</div>
        </div>
        
    </div>
    <!-- panel -->
</div>

<div class="accordion">
    <button class="accordion-btn"><span>APR Offers</span></button>
    <div class="panel">
        <div class="content"><input type="checkbox">Subscription</div>
        <button class="accordion-btn inner-accord"><span>Auto Publish</span></button>
        <div class="panel">
            <div class="content1"><input type="checkbox">APR Offers</div>
            <div class="content1"><input type="checkbox">Conditional APR Offers</div>
            <div class="content1"><input type="checkbox">APR Rebates</div>
            <div class="content1"><input type="checkbox">Conditional APR Rebates</div>
                    <div class="content1"><input type="checkbox">Formula Pricing APR Rebates</div>
        </div>
    </div>
    <!-- panel -->
</div>
<div class="accordion">
    <button class="accordion-btn"><span>LEASE Offers</span></button>
    <div class="panel">
        <div class="content"><input type="checkbox">Subscription</div>
        <button class="accordion-btn inner-accord"><span>Auto Publish</span></button>
        <div class="panel">
            <div class="content1"><input type="checkbox">Lease Offers</div>
            <div class="content1"><input type="checkbox">Lease Rebates</div>
        </div>
    </div>
    <!-- panel -->
</div>

2. Add the following CSS code to your project. Customize the styles for buttons, panels, checkboxes, and any other elements to match your design preferences.

@import 'https://fonts.googleapis.com/css?family=Montserrat';
.accordion .content {
  padding: 0.5em 1.5em 0.5em;
}

.content1 {
  padding: 0.5em 5em 0.5em;
}

* {
  font-size: 16px;
  font-family: "Montserrat", Helvetica, sans-serif;
}

/* Accordion Styles */
.accordion {
  width: 60%;
  margin: 0 auto;
  border: 1px solid #ECF0F1;
}

/* Button Styles */
.accordion-btn {
  background-color: #2C3E50;
  font-size: 1.5em;
  color: #ECF0F1;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border: none;
  transition: 0.5s;
}

.accordion-btn span {
  padding-left: 0.5em;
}

.accordion-btn:after {
  content: "+";
  font-size: 1em;
  color: #ECF0F1;
  float: left;
  margin-left: 2px;
}

/* Active and Hover Button Styles */
.accordion-btn.active,
.accordion-btn:hover {
  background-color: #3f5973;
}

.accordion-btn.active:after {
  content: "-";
}

/* Panel Styles */
.panel {
  background-color: #ECF0F1;
  max-height: 0;
  overflow: hidden;
  transition: 0.5s ease-in-out;
  opacity: 0;
}

.panel p {
  font-size: 1.2em;
  padding: 0 2em;
}

/* Show Panel onclick */
.panel.show {
  display: block;
  opacity: 1;
  max-height: 500px;
}

/* Inner Accordion Style */
.inner-accord {
  background-color: #5b80a4;
  font-size: 1.2em;
  margin-left: 1.25em;
}

.inner-accord.active,
.inner-accord:hover {
  background-color: #7b99b7;
}

3. The JavaScript code adds interactivity to the accordion. It toggles the “active” and “show” states of panels when the buttons are clicked. This enables users to expand and collapse sections. Include the following JavaScript code between the <script> tag just before closing the <body> element.

// Toggle 'active' and 'show' states of panels

var accord = document.getElementsByClassName("accordion-btn");
var i;

for (i = 0; i < accord.length; i++) {
    accord[i].onclick = function() {
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

That’s it! You’ve now implemented a Nested Accordion, providing an organized and interactive way for users to navigate and make selections within your content. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X