I attempted to create a color system management, but as a beginner, I find it quite challenging!
My issue is:
When I load my HTML page, everything works fine. However, when I click on the "li" element to load JSON, all my toggle elements stop working!!! It's strange, could it be a syntax problem?
HTML CODE :
<div id="content">
<div class="theme-item">
<ul class="color-list one">
<li>
<span class="in"></span>
</li>
</ul>
</div>
<ul class="elements-list">
<li class="elements-item">
<span class="tog">test one</span>
<div class="togcont hidden">
<h5 data-title="">text text</h5>
</div>
</li>
</ul>
</div>
jQUERY CODE :
$(document).ready(function() {
// ----------------------
// JSON INFOS
// ----------------------
$(".color-list li").click(function(event){
$.getJSON('result.json', function(jd) {
$('ul.elements-list').html('<li class="elements-item"><span class="tog">' + jd.name + '</span><div class="togcont"><p>Name: ' + jd.name + '</p></div></li>');
$('ul.elements-list').append('<li class="elements-item"><span class="tog">' + jd.age + '</span><div class="togcont hidden">Name: ' + jd.age + '</div></li>');
$('ul.elements-list').append('<li class="elements-item"><span class="tog">' + jd.sex + '</span><div class="togcont hidden">Name: ' + jd.sex + '</div></li>');
});
});
// ----------------------
// TOGGLE BULLZ
// ----------------------
$(".tog").click(function(){
var obj = $(this).next();
if($(obj).hasClass("hidden")){
$(obj).removeClass("hidden").slideDown();
$(this).addClass("bounce");
} else {
$(obj).addClass("hidden").slideUp();
$(this).removeClass("bounce");
}
});
});
CSS CODE (PART) :
ul.elements-list {
list-style-position: inside;
list-style-type: none;
}
ul.elements-list li {
margin: 20px 0;
background-color: #393939;
border-radius: 16px;
text-transform: uppercase;
font-weight: 300;
}
ul.elements-list li .tog {
color: #FFF;
cursor:pointer;
width: 100%;
display: inline-block;
box-sizing: border-box;
cursor:pointer;
}
div.togcont {
padding:15px 20px;
overflow:hidden;
margin-bottom:20px;
display: none;
text-transform: none;
line-height: 1.8em;
font-size: 1.0em;
color: #CCC;
text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}