Dynamic toggle system

Question

I'm new to jQuery/JSON and I've build an dynamic toggle system. It work fine, but I'm not sure about my code and I want a better way of building this.

Could you please see my code and give comments/solutions/explanations for a better structure for this system?

NOTE: All JSON files are the same build

$(document).ready(function() {
 $(".color-list.one li:nth-child(2)").on('click', function() {
 $.getJSON("json/a2.json", function(data) {
 //Handle my response
 $('ul.elements-list').html(
 '<li class="elements-item"><span class="tog">' + data.Atitle + '</span>'+
 '<div class="togcont hidden">'+
 '<ul class="elements-link">'+
 '<li><a href=' + data.AAurlElement + '>' + data.AAnameElement + '</a></li>'+
 '<li><a href=' + data.ABurlElement + '>' + data.ABnameElement + '</a></li>'+
 '</ul>'+
 '</div></li>');
 $('ul.elements-list').append(
 '<li class="elements-item"><span class="tog">' + data.Btitle + '</span>'+
 '<div class="togcont hidden">'+
 '<ul class="elements-link">'+
 '<li><a href=' + data.BAurlElement + '>' + data.BAnameElement + '</a></li>'+
 '</ul>'+
 '</div></li>');
 });
 });
 $(".color-list.one li:nth-child(3)").on('click', function() {
 $.getJSON("json/a3.json", function(data) {
 //Handle my response
 $('ul.elements-list').html(
 '<li class="elements-item"><span class="tog">' + data.Btitle + '</span>'+
 '<div class="togcont hidden">'+
 '<ul class="elements-link">'+
 '<li><a href=' + data.BAurlElement + '>' + data.BAnameElement + '</a></li>'+
 '<li><a href=' + data.BBurlElement + '>' + data.BBnameElement + '</a></li>'+
 '</ul>'+
 '</div></li>');
 });
 });
 $(".color-list.one li:nth-child(4)").on('click', function() {
 $.getJSON("json/a4.json", function(data) {
 //Handle my response
 $('ul.elements-list').html(
 '<li class="elements-item"><span class="tog">' + data.Atitle + '</span>'+
 '<div class="togcont hidden">'+
 '<ul class="elements-link">'+
 '<li><a href=' + data.AAurlElement + '>' + data.AAnameElement + '</a></li>'+
 '<li><a href=' + data.ABurlElement + '>' + data.ABnameElement + '</a></li>'+
 '<li><a href=' + data.ACurlElement + '>' + data.ACnameElement + '</a></li>'+
 '</ul>'+
 '</div></li>');
 $('ul.elements-list').append(
 '<li class="elements-item"><span class="tog">' + data.Btitle + '</span>'+
 '<div class="togcont hidden">'+
 '<ul class="elements-link">'+
 '<li><a href=' + data.BAurlElement + '>' + data.BAnameElement + '</a></li>'+
 '</ul>'+
 '</div></li>');
 });
 });
 $(".color-list.one li:nth-child(5)").on('click', function() {
 $.getJSON("json/a5.json", function(data) {
 //Handle my response
 $('ul.elements-list').html(
 '<li class="elements-item"><span class="tog">' + data.Atitle + '</span>'+
 '<div class="togcont hidden">'+
 '<ul class="elements-link">'+
 '<li><a href=' + data.AAurlElement + '>' + data.AAnameElement + '</a></li>'+
 '<li><a href=' + data.ABurlElement + '>' + data.ABnameElement + '</a></li>'+
 '<li><a href=' + data.ACurlElement + '>' + data.ACnameElement + '</a></li>'+
 '</ul>'+
 '</div></li>');
 $('ul.elements-list').append(
 '<li class="elements-item"><span class="tog">' + data.Btitle + '</span>'+
 '<div class="togcont hidden">'+
 '<ul class="elements-link">'+
 '<li><a href=' + data.BAurlElement + '>' + data.BAnameElement + '</a></li>'+
 '</ul>'+
 '</div></li>');
 });
 });
 $('ul.elements-list').on("click", ".tog", function(){
 var obj = $(this).next();
 if(obj.hasClass("hidden")){
 obj.removeClass("hidden").slideDown();
 $(this).addClass("bounce");
 } else {
 obj.addClass("hidden").slideUp();
 $(this).removeClass("bounce");
 }
 });
});

The structure of my json files :

{
"Atitle": "Master Title A",
"AAnameElement": "name 1",
"ABnameElement": "name 2",
"ACnameElement": "name 3",
"AAurlElement" : "url1.html",
"ABurlElement" : "url2.html",
"ACurlElement" : "url3.html",
"Btitle": "Master Title B",
"BAurlElement" : "urlB1.html",
"BAnameElement": "name B1"
}

Answer 1

You are definitely repeating a ton of code, as far as I can tell the following is true

• You always set the html $('ul.elements-list') to show either an .A or .B list
• The amount of elements varies, but it seems to be never more than 3
• Optionally if the .A is shown, you might also show a .B list
• The .A list always comes before the .B list

From there you could build a function that takes the amount of A and B list entries to display

function buildTable(data, config) {
 var title = data[config.prefix + 'title'],
 output = '<li class="elements-item">' +
 '<span class="tog">' + title + '</span>' +
 '<div class="togcont hidden">' +
 '<ul class="elements-link">',
 i, rowId,url,name;
 for( i = 0 ; i < config.rows ; i++)
 {
 //ASCII, 65 -> A, 66 -> B etc.
 rowId = config.prefix + String.fromCharCode( 65+i );
 url = data[rowId + 'urlElement'];
 name = data[rowId + 'nameElement'];
 output += ' < li > < a href = ' + url + ' > ' + name + ' < /a></li > '
 }
 output += ' < /ul></div > < /li>';
 return output
}
function buildTables( data , config )
{
 var html = ""
 for( var i = 0; i < config.length ; i++ ){
 html += buildTable( data , config[i] );
 }
 $('ul.elements-list').html( html );
}

From there you can simply change your listeners to

$.getJSON("json/a2.json", function(data) {
 buildTables( data , [ { prefix : "A" , rows : 2 } , { prefix : "B" , rows : 1 } ] );
});
$.getJSON("json/a3.json", function(data) {
 buildTables( data , [ { prefix : "B" , rows : 2 } ] );
});
$.getJSON("json/a4.json", function(data) {
 buildTables( data , [ { prefix : "A" , rows : 3 } , { prefix : "B" , rows : 1 } ] );
});

etc. etc.

I did not test the code, however it should give you an insight how to build this yourself.

• GilbertOOl: Waouhh, thanks but i'm newbies and i'm not sure to understand the synthax and the close tag! I've test your code and i can't do work it!
• GilbertOOl: I've edited my code with add the structure of my json files!
• konijn: Thanks, I cleaned up my code so that at least there are no more syntax errors. Still, this might be too big a jump for you :\ Is there any part that needs to be explained better/extra ?
• GilbertOOl: Thanks, I've a hard time with endings (parenthesis, brackets, semi-colons ... etc). so, where i must put the $(document)ready (function () { and my toggle system function please?
• GilbertOOl: Hi, Thanks for the great help @konijn but i tried to use your code but I don't organize! I can't put well my "toggle" function and all others code neccessary!