How to make use of it:

1. The JSON Menu plugin requires the 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 primary 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. 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"
});

4. Add new objects 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"
});

5. Show & cover the menu objects manually.

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

6. Remove & clear the menu objects manually.

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

Dynamic JSON Accordion Menu For Bootstrap, JSON menu Plugin/Github

See Demo And Download