JSFiddle - React, Tailwind, and code Playground

by suphalak_26

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="sUsing">A:1,2,3|B:1,2|C:4</div>

<button type="button" id="click">Click Me!</button>
<div id="showData"></div>

JavaScript

var sUsing = jQuery('#sUsing').text();
jQuery("#click").click(function(){
    if(sUsing !== null && sUsing !== ""){
   var sSplit = sUsing.split("|");
        //alert(sSplit.length);
   for(var i=0; i<sSplit.length; i++){
       createHeaderAndDetail(sSplit[i]);
  }
      
}
  
});
function createHeaderAndDetail(s){
    var sHeaderAndDetail = s.split(":");
    var sHeader = sHeaderAndDetail[0];
    var sDetail = sHeaderAndDetail[1];
    //alert(sHeader);
    createDataToggle(sHeader,sDetail.split(","));
}

function createDataToggle(header, detail){
    //alert(header);
    //alert(detail);
    var ulDetail = generateDetail(detail);
    jQuery('#showData').append('<div class="panel-group"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#'+header+'">'  +header+ '</a></h4></div><div id="'+header+'" class="panel-collapse collapse"><div class="panel-body">'+ulDetail+'</div></div></div></div>');   
}

function generateDetail(detail){
    var genDetail = '<ul>';
    for(var i=0; i<detail.length; i++){
        genDetail += '<li>'+detail[i]+'</li>';       
    }
    genDetail+='</ul>';
    return genDetail;    
}