Multi Level jQuery Accordion with unlimited nesting

Are you looking for Multi Level jQuery Accordion. If yes then in this post I am going to share simple jquery script for making nested Accordion where you can put content under sliding menu and also created nested list as accordion. You could simply toggle the .show class (if display: block is uncommented in the CSS) in JavaScript, but you’ll lose the animation.

Multi Level jQuery Accordion with unlimited nesting

HTML

<h1>A Cool Accordion</h1>
 
<ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Item 1</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
 
  <li>
    <a class="toggle" href="javascript:void(0);">Item 2</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
 
  <li>
    <a class="toggle" href="javascript:void(0);">Item 3</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Open Inner</a>
        <div class="inner">
 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
 
 
        </div>
      </li>
 
      <li>
        <a href="#" class="toggle">Open Inner #2</a>
        <div class="inner">
 
            Children will automatically close upon closing its parent.
 
        </div>
      </li>
 
      <li>Option 3</li>
    </ul>
  </li>
 
  <li>
    <a class="toggle" href="javascript:void(0);">Item 4</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Technically any number of nested elements</a>
        <ul class="inner">
          <li>
            <a href="#" class="toggle">Another nested element</a>
            <div class="inner">
 
                As long as the inner element has inner as one of its classes then it will be toggled.
 
 
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
 
 
            </div>
          </li>
        </ul>
      </li>
 
      <li>Option 2</li>
 
      <li>Option 3</li>
    </ul>
  </li>
</ul>



CSS

@import url('https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600');
 
* {
    box-sizing: border-box;
    font-family: 'Open Sans',sans-serif;
    font-weight: 300;
}
 
a {
    text-decoration: none;
    color: inherit;
}
 
p {
    font-size:1.1em;
    margin: 1em 0;
}
 
.description {
  margin: 1em auto 2.25em;
}
 
body {
    width: 40%;
    min-width: 300px;
    max-width: 400px;
    margin: 1.5em auto;
    color: #333;
}
 
h1 {
    font-family: 'Pacifico', cursive;
    font-weight: 400;
    font-size: 2.5em;
}
 
ul {
    list-style: none;
    padding: 0;
 
    .inner {
        padding-left: 1em;
        overflow: hidden;
        display: none;
 
        &.show {
          /*display: block;*/
        }
    }
 
    li {
        margin: .5em 0;
 
        a.toggle {
            width: 100%;
            display: block;
            background: rgba(0,0,0,0.78);
            color: #fefefe;
            padding: .75em;
            border-radius: 0.15em;
            transition: background .3s ease;
 
            &:hover {
                background: rgba(0, 0, 0, 0.9);
            }
        }
    }
}



JS

$('.toggle').click(function(e) {
    e.preventDefault();
 
    var $this = $(this);
 
    if ($this.next().hasClass('show')) {
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('li .inner').removeClass('show');
        $this.parent().parent().find('li .inner').slideUp(350);
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by brenden. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

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