Hierarchical Tree & Multi-level Accordion Plugin - mgAccordion

mgAccordion is a lightweight, SEO-friendly jQuery content toggle plugin to generate a hierarchical tree or multi-level accordion menu from nested HTML unordered lists.

How to use it:

1. Download and load the mgAccordion plugin's files in the HTML page which has jQuery library loaded.

<link rel="stylesheet" href="/path/to/mgaccordion.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/mgaccordion.js"></script>

2. Load Font Awesome Icon Font for expand/collapse icons. (OPTIONAL)

<link rel="stylesheet" href="/path/to/cdn/fontawesome.css" />

3. Create nested HTML lists on the page.

<ul class="example">
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

4. Call the function on the top list to generate an accordion menu.

$(function(){
  $('.example').mgaccordion();
});

5. Setting the theme to tree will generate a hierarchical tree.

$(function(){
  $('.example').mgaccordion({
    theme: "tree"
  });
});

6. Determine whether to close other accordion menus when a new one is opened.

$(function(){
  $('.example').mgaccordion({
    leaveOpen: true
  });
});

Changelog:

2020-04-15

• Added e.preventDefault() to click event

2020-04-05

• removed unneeded code before initialize method

---

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