jQuery addClass example

Change class name on click in jQuery

by gokulmaha

HTML

<div id="banner-message"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

var banner = $("#banner-message");
var data = [{
    "Name": "M001",
    "Child": [{
        "Name": "C1"
      },
      {
        "Name": "C2"
      },
      {
        "Name": "C3",
        "Child": [{
          "Name": "E1"
        }]
      }
    ]
  },
  {
    "Name": "A005",
    "Child": [{
        "Name": "C3"
      },
      {
        "Name": "C4"
      }
    ]
  }
]
var html = "";

makeMenu(data);
$(banner).html(html);

function makeMenu(item) {
   $.each(item,function(i,v){ 
      html += "<li>"+ v.Name + makeChildMenu(v)+ "</li>";
   })
}
var html1 = "";

function makeChildMenu(item){

  if(item.hasOwnProperty("Child") && typeof item == "object" ){
   $.each(item,function(i,v){ 
    html1 += "<ul><li>"+ v.Name + makeChildMenu(v)+ "</li></ul>";
   }) 
  }
  else if(typeof item == "string" ){
  }
  else if(Array.isArray(item)){
       	 $.each(item,function(i,v){ 
    		html1 += "<ul><li>"+ v.Name + "</li></ul>";
   }) 
  }
  return html1;
}