Dynamic JSON Accordion Menu For Bootstrap - jQuery JSONmenu

A JSON based menu builder plugin that enables developers to dynamically creates an accordion-style vertical menu using jQuery and Bootstrap 4 list component.

How to use it:

1. The JSON Menu plugin requires jQuery library and Bootstrap 4 framework to work.

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

2. Create a basic accordion menu from a JavaScript array of objects as follows:

$("#myMenu").jsonMenu("set", {
  body:[{
    header:"<strong>Header</strong>",
    body:"Body",
    collapse:true
  },{
    header:"Aanother header",
    body:"This body supports <a href='https://google.com'>HTML CODE</a>.",
    footer:"<hr/> Menu Body Here",
    collapse:false
  }]
});

3. It also works with JSON data by using the JSON.parse() and JSON.stringify() methods.

4. Add header & footer to the accordion menu.

$("#myMenu").jsonMenu("set", {
  header: 'Header Here',
  body:[{
    header:"<strong>Header</strong>",
    body:"Body",
    collapse:true
  },{
    header:"Aanother header",
    body:"This body supports <a href='https://google.com'>HTML CODE</a>.",
    footer:"<hr/> Menu Body Here",
    collapse:false
  }],
  footer:"Footer Here"
});

5. Add new items to the accordion menu.

$("#myMenu").jsonMenu("add", {
  header: 'New Header Here',
  body:[{
    header:"<strong>Header</strong>",
    body:"Body",
    collapse:true
  },{
    header:"Aanother header",
    body:"This body supports <a href='https://google.com'>HTML CODE</a>.",
    footer:"<hr/> Menu Body Here",
    collapse:false
  }],
  footer:"New Footer Here"
});

6. Show & hide the menu items manually.

$("#myMenu").jsonMenu("show");
$("#myMenu").jsonMenu("hide");

7. Remove & clear the menu items manually.

$("#myMenu").jsonMenu("remove");
$("#myMenu").jsonMenu("clear");

---

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