Hierarchical Tree & Multi-level Accordion Plugin - mgAccordion

File Size: 5.77 KB
Views Total: 8934
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>Black tea</li>
      <li>Green tea</li>

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


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

    theme: "tree"

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

    leaveOpen: true



  • Added e.preventDefault() to click event


  • 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.