dynamic content

dynamic content by using loops and conditions

by santosh_patnala

HTML

<div class="pageContent">
    <ul class="nav nav-tabs" id="myTabPagination" style=" margin-bottom: 4PX;"></ul>
</div>
<div class="tab-content" id="tabContent"></div>

CSS

.nav-tabs > li {
    margin-bottom: 0px;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
    /*border: 1px solid transparent;*/
    /*border-bottom: none;*/
    border-color: transparent;
    color: #308299;
}
.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
    /*border: 1px solid transparent;*/
    /*border-bottom: none;*/
    border-color: transparent;
}
.nav > li > a:hover, .nav > li > a:focus {
    border-color: transparent;
    background-color: transparent;
}
.toggleAssetName {
    font-size: 10.5px;
    color: #7D7D7D;
    font-weight: bold;
    /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
            -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
}
.toggleAssetName:hover {
    color: #7D7D7D;
}

JavaScript

$(document).ready(function () {
    //addNumbers();
    //chkChange();
    //alert("doc");
    addLis();
});

function addNumbers() {
    //alert("fn");
    //var input = document.getElementsByTagName("input");
    if ($("input:checked")) {
        //alert("if");
        for (var i = 1; i <= $("input:checked").length; i++) {
            //alert("for");
            $("#myTabPagination").append('<li><a href="#page' + i + '" data-toggle="tab">' + i + '</a></li>');
        }
        addLis();
    }
    //alert("fn end");
}

function addLis() {
    if ($("input:checked")) {
        for (var i = 1; i <= $("input:checked").length; i++) {
            $("#myTabPagination").append('<li><a href="#page' + i + '" data-toggle="tab">' + i + '</a></li>');



            $("#tabContent").append(
                '<div class="tab-pane" id="page' + i + '">' +
                '<div class="accordion" id="accordion' + i + '" style="margin-bottom: 12px;">' +
                '<div class="accordion-group">' +
                '<div class="accordion-heading" style="background-color:#D6D6D6;">' +
                '<a class="accordion-toggle toggleAssetName" data-toggle="collapse" data-parent="#accordion" href="#collapse' + i + '">Asset ' + i + '</a>' +
            /*'<a class="close" href="#" style="margin: 0 7px; opacity:0.5;">&times;</a>' +*/
                '</div>' +
                '<div id="collapse' + i + '" class="accordion-body collapse in">' +
                '<div class="accordion-inner span12" style="padding: 0; float: left; background-color:#F2F2F2;">' +
                '<div class="graphContainerPie span6" style="box-shadow: none;">' +
                '<div class="span12" id="containerPie" style="min-width: 150px; height: 150px; margin: 0 auto"></div>' +
                '</div>' +
                '<div class="graphContainerPie span6" style="box-shadow: none; border-left:2px solid #EAEAEA;">' +
                '<div class="list-group-item" style="border: none; padding: 5px;...