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.