Semantic UI Nested Accordions 01

by Dominic Myers

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.4/semantic.min.js"></script>
<div id="accordionHolder">
</div>

CSS

#accordionHolder .content .accordion {
    margin: 0em 0em 0em 2em !important;
}

#accordionHolder .title.active {
    font-weight: bold;
}

JavaScript

var tree = {
    "One": {},
    "Two": {
        "Two point one": {},
        "Two point two": {}
    },
    "Three": {},
    "Four": {
        "Four point one": {},
        "Four point two": {}
    },
    "Five": {
        "Five point one": {},
        "Five point two": {}
    },
    "Six": {}
};

$(function() {
    $("#accordionHolder").append(buildAccordion(tree)).ready(function() {
        $('.accordion').accordion({
            "selector": {
                "trigger": ".title .icon"
            }
        });
    });
});

function buildAccordion(obj) {
    var accordion = $("<div></div>", {
        "class": "ui accordion"
    });
    for (var limb in obj) {
        if (obj.hasOwnProperty(limb)) {
            console.log(limb, Object.keys(obj[limb]).length);
            if (Object.keys(obj[limb]).length === 0) {
                accordion.append($("<div></div>", {
                    "class": "title",
                    "text": limb
                }));
            } else {
                accordion.append($("<div></div>", {
                    "class": "title",
                    "text": limb
                }).prepend($("<i></i>", {
                    "class": "dropdown icon"
                })));
                accordion.append($("<div></div>", {
                    "class": "content"
                }).append(buildAccordion(obj[limb])));
            }
        }
    }
    return accordion;
}