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.

4.5/5.0
Last updated 09 September, 2022
By Admin

You could simply toggle the .show class (if display: block is uncommented in the CSS) in JavaScript, but you’ll lose the animation.

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);
            }
        }
    }
}

$('.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);
    }
});

I hope it can help you...

Jquery Plugin

Accordion

Multi Level JQuery Accordion With Unlimited Nesting

Categories