LEzOwP

index.html

<div class="sidebar">
  <ul class="main-menu">
    <li class="main-menu__item"><a href="http://google.com">Link</a></li>
    <li class="main-menu__item  main-menu__item--parent">
      <a href="#">Parent Dropdown</a>
      <ul class="main-menu__sub-menu">
        <li class="main-menu__sub-menu__item"><a href="http://google.com">Child Link</a></li>
        <li class="main-menu__item--parent  main-menu__sub-menu__item">
          <a href="#">Child Dropdown</a>
          <ul class="main-menu__sub-menu main-menu__sub-menu--2">
            <li class="main-menu__sub-menu__item main-menu__sub-menu--2__item"><a href="http://google.com">Grandchild Link</a></li>
            <li class="main-menu__sub-menu__item main-menu__sub-menu--2__item"><a href="http://google.com">Grandchild Link</a></li>
            <li class="main-menu__sub-menu__item main-menu__sub-menu--2__item"><a href="http://google.com">Grandchild Link</a></li>
            <li class="main-menu__sub-menu__item main-menu__sub-menu--2__item"><a href="http://google.com">Grandchild Link</a></li>
            <li class="main-menu__sub-menu__item main-menu__sub-menu--2__item"><a href="http://google.com">Grandchild Link</a></li>
          </ul>
        </li>
        <li class="main-menu__item--parent  main-menu__sub-menu__item main-menu__sub-menu--1__item">
          <a href="#">Child Dropdown</a>
          <ul class="main-menu__sub-menu main-menu__sub-menu--2">
            <li class="main-menu__sub-menu__item main-menu__sub-menu--2__item"><a href="http://google.com">Grandchild Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

LEzOwP.markdown

Nested Accordions

A Pen by Ash on CodePen.

License.

script.js

// Nested Accordion(s)
// @requires latest versions of jQuery & jQuery-UI
jQuery(document).ready(function($) {
  jQuery(".main-menu__item--parent").accordion({
    heightStyle: "content",
    collapsible: true
  });
});

style.css

li{
  display: block;
}

li a{
  display: block;
}

ul{
  display: block;
}

  .main-menu__sub-menu{
    display: none;
  }