Как Скрыть/показать/свернуть/развернуть динамически добавляемые элементы ul

---

только проверенные значения должны свернуться , развернуть его не работает нормально

Что я уже пробовал:

Привет ребята вот мои данные которые я добавил к ul с флажками как:

Id  name       subid   subname
1   India      1       Virat
1   India      2       Rohit
1   India      3       Shikar
2   Australia  4       Smith
2   Australia  5       warner

Это формирует дерево с флажками, которые динамически добавляются.

Мои данные содержат все эти записи отдельно. Я сгруппировал его и сделал, как указано выше.

var tree = {};

for (var i = 0; i < data.d.length; i++) {
    var groupName = data.d[i].name + "_" + data.d[i].id;
    if (!tree[groupName]) {
        tree[groupName] = [];
    }
    tree[groupName].push(data.d[i].subname + "_" + data.d[i].subid);
}

myArray = [];

for (var groupName in tree) {
    myArray.push({ team: groupName, player: tree[groupName] });
}

for (var i = 0; i < myArray.length; i++) {
    var i1 = myArray[i].team;
    var parts = i1.split('_', 2);
    var name = parts[0];
    var id = parts[1];
    var myStringArray = myArray[i].player;

    $('.divclassid .multiselect-container').append($("<ul onclick='addnewClass();' class='collapselist' ><label class='checkbox'><input id='chk_" + id + "' class='chkCls' type='checkbox' onchange='chksubcls(this);'   value='" + id + "'/>" + name + "</label></ul>"));

    // debugger;
    if (myStringArray != "" + "_") {
        var arrayLength = myStringArray.length;

        for (var k = 0; k < arrayLength; k++) {
            var subidname = myStringArray[k];
            var subparts = subidname.split("_", 2);
            var subname = subparts[0];
            var subid = subparts[1];

            $('.divclassid .multiselect-container').append($("<ul onclick='addnewClass();' style='display:none;'  class='expandlist'><label class='checkbox subcls'  ><input id='chksub_" + id + "' class='chkClssub' type='checkbox'  value='" + subid + "'/>" + subname + "</label></ul>"))
        }
    }
}

function addnewClass() {
    $('.divclassid .btn-group').addClass('open');
}

function chksubcls(obj) {
    if ($('#chk_' + obj.value).prop('checked')) {
        // debugger;
        $('ul.expandlist').show();
        // Here, how to expand collapse only those which are checked?
    }
    else {
        // $('ul.expandlist').find('ul.chkClssub #chksub_' + obj.value).css('display', 'none');
        $('ul.expandlist').hide();
    }
}

Теперь я сделал свой дисплей в стиле ul: нет. Когда я устанавливаю флажок, все элементы расширяются. Мне нужно расширять только ту команду, которая проверена.

Предположим, что если Индия проверена, то только

Индия
Вират
Рохит
шикар

должны расширить. Это не работает. Он расширяет весь список ul. Пожалуйста помочь.

Я сформировал его как список с ul, который динамически добавляется с помощью флажков. Или есть какой - то другой способ добавить как дерево, развернуть/свернуть только проверено. Весь список динамически добавляется. При проверке флажка я вызываю функцию с этим и передаю проверенный идентификатор флажка. Теперь, как мне развернуть/свернуть только проверенный список команд и игроков?

Когда я делаю это, это не работает нормально. Весь список расширяется и сворачивается при проверке любого названия команды. Только проверенное название команды с игроками должно быть расширено. Все это динамически добавляется к div.

Любой другой способ динамической привязки к ul с древовидным представлением и только выбранным расширением/свертыванием также поможет мне.

Пожалуйста помочь.

---