Multilevel Accordion/Toggle Plugin with jQuery - zAccordions

zAccordions is a lightweight jQuery plugin used to transform nested Html lists into a multilevel accordion list with ease. It comes with a toggle mode which allows you to have multiple accordions open at the same time.

How to use it:

1. Include jQuery library and the jQuery zAccordions plugin on your Html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="zAccordion.js"></script>

2. Create a nested Html unordered list for the accordion.

<ul class="accordion">
  <li> <a href="#">List Item 1</a>
    <ul>
      <li> <a href="#">Sub List 1</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
      <li> <a href="#">Sub List 2</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
      <li> <a href="#">Sub List 3</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
      <li> <a href="#">Sub List 4</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li> <a href="#">List Item 2</a>
    <ul>
      <li> <a href="#">Sub List 1</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
      <li> <a href="#">Sub List 2</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
      <li> <a href="#">Sub List 3</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
      <li> <a href="#">Sub List 4</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li> <a href="#">List Item 3</a>
    <ul>
      <li> <a href="#">Sub List 1</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
      <li> <a href="#">Sub List 2</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
      <li> <a href="#">Sub List 3</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
      <li> <a href="#">Sub List 4</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li> <a href="#">List Item 4</a>
    <ul>
      <li> <a href="#">Sub List 1</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
      <li> <a href="#">Sub List 2</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
      <li> <a href="#">Sub List 3</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
      <li> <a href="#">Sub List 4</a>
        <ul>
          <li><a href="#">Sub Sub List 1</a></li>
          <li><a href="#">Sub Sub List 2</a></li>
          <li><a href="#">Sub Sub List 3</a></li>
          <li><a href="#">Sub Sub List 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

3. Style the accordion in any way you like.

.zAccordionWrap {
  background: #151515;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px 0 10px 0;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}

.zAccordionWrap .zAccordion {
  margin: 0;
  padding: 10px 15px;
  list-style: none;
}

.zAccordion ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 15px;
}

.zAccordion .active { color: red; }

.zAccordion a {
  color: #B5E853;
  border-radius: 6px 0 6px 0;
  text-decoration: none;
  display: block;
  padding: 5px 10px;
  margin: 5px 0;
  background: #ddd;
  background: rgba(0, 0, 0, 0.9);
}

4. Initialize the accordion.

$('.accordion').zAccordion();

5. Active the toggle mode so that the visitors can expand multiple accordions at the same time.

$('.accordion').zAccordion({
toggle : true
});

---

This awesome jQuery plugin is developed by ziapk. For more Advanced Usages, please check the demo page or visit the official website.