Bootstrap Snippet Branched collapsible accordion using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class='menu'>
    <div class='accordion' id='tree_accordion'>
        <!-- CONTENT HERE -->
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
.menu .accordion-heading {  position: relative; }
.menu .green { border-left: 10px solid green; }
.menu .collapse.in { overflow: visible; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
 * FOOTPRINT
 */
var group_div   =  "<div class='accordion-group'>\
                        <div class='accordion-heading green'>\
                            <a class='accordion-toggle' data-toggle='collapse'\
                            href='#$ID'>$TITLE</a>\
                        </div>\
                        <div class='accordion-body collapse' id='$ID'>\
                            $INNER\
                        </div>\
                    </div>";
var inner_div   =  "<div class='accordion-inner'>\
                        $CONTENT\
                    </div>";
/**
 * Creates a nested multi level and collapsible menu with accordion
 * @param config
 *  - An array with JSON configurations for the nested menu accordion
 *  - Example:
 *  config = [
 *              {id:'level1', title:'LEVEL 1', levels:
 *                  [ 
 *                      {id:'level1-1', title:'LEVEL 1-1', content:'text'},
 *                      {id:'level1-2', title:'LEVEL 1-2', content:'text'},
 *                      {id:'level1-2', title:'LEVEL 1-2', levels: [ ... ]}
 *                  ]
 *              },
 *              // Deepest element must contain "content" data to visualize
 *              {id:'level2', title:'LEVEL 2', content:'MY CONTENT'}, 
 *              {id:'levelN', title:'LEVEL N', content:'MY CONTENT'}
 *           ]
 */
function createAccordion(config){
    var content = '';
    config.forEach(function(level) {
        var subcontent  = group_div.replace(/\$ID/g, level.id)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Branched collapsible accordion"
Bootstrap 2.3.2 Snippet by ezequielmg

Related: See More

Questions / Comments:

"Branched collapsible accordion" Bootstrap 2.3.2 Snippet by ezequielmg

Related: See More

Questions / Comments:

"Branched collapsible accordion"
Bootstrap 2.3.2 Snippet by ezequielmg