Vis.js Timeline cannot toggle nested groups

Question

I don't want to toggle all the groups with a button. I just want to toggle individual groups at a time with the little triangle button to the left of the group title.

Currently, I can click the button and the triangle rotates 90 degrees, but the nested group still stays visible.

I've seen this question and similar questions on GitHub but nothing has gotten me there yet.

Below is how I'm configuring the timeline...

var container = document.getElementById('timelinez');
var items = new vis.DataSet();
var visibleData;

// Configure groups
//var groupLabelHTML = '<p style="margin:0px;padding:0px;">'+name+'<br><a href='+URL+'><img style="height:14px" src='+arrowURL+'></a></p>';
var groups = [
    {id: 'x1',content: 'x1', nestedGroups: ['x1_APs']},
    {id: 'x2',content: 'x2', nestedGroups: ['x2_APs']},
    {id: 'x3',content: 'x3', nestedGroups: ['x3_APs']},
    {id: 'x4',content: 'x4', nestedGroups: ['x4_APs']},
    {id: 'x5',content: 'x5', nestedGroups: ['x5_APs']},
    {id: 'x6',content: 'x6', nestedGroups: ['x6_APs']},
    {id: 'x7',content: 'x7', nestedGroups: ['x7_APs']},
    {id: 'x8',content: 'x8', nestedGroups: ['x8_APs']},

    {id: 'x1_APs',content: 'APs'},
    {id: 'x2_APs',content: 'APs'},
    {id: 'x3_APs',content: 'APs'},
    {id: 'x4_APs',content: 'APs'},
    {id: 'x5_APs',content: 'APs'},
    {id: 'x6_APs',content: 'APs'},
    {id: 'x7_APs',content: 'APs'},
    {id: 'x8_APs',content: 'APs'}
];

// Configuration for the Timeline
var options = {
    width: '100%',
    type:'range',
    groupOrder: 'content',
    editable: true,
    groupEditable: true,
    orientation: 'top',
    tooltip:{followMouse:true},
    start: new Date(Date.now()),
    end: new Date(sixWeek), 
    groupTemplate: function (group) {
        var container = document.createElement('div');
        var label = document.createElement('span');
        var hide = document.createElement('img');
        label.innerHTML = group.content + ' ';
        label.style = "font-size:15px";
        container.insertAdjacentElement('afterBegin',label);
        hide.src = "cant show this";
        hide.className = "hide-btn";

        if (!(group.id.indexOf("_APs") >= 0)) {
            container.insertAdjacentElement('beforeEnd',hide);  
        }   

        return container;
    }
};

I can't show much more code because it's super tedious to strip out the proprietary stuff. Here is how I'm creating items though...

items.add({group:sys,content:name,title:toolTip,start:start,end:end,className:color,variety:type,subgroup:subgroup,system:sys,linkHTML:linkHTML});

How can I toggle the visibility of these nested groups?

Answer 1

The solution was to create groups as a dataset instead of an array.

In other words. This...

var groups = [
   {id: 'x1',content: 'x1', nestedGroups: ['x1_APs']},
   {id: 'x2',content: 'x2', nestedGroups: ['x2_APs']},
   {id: 'x3',content: 'x3', nestedGroups: ['x3_APs']},
   {id: 'x4',content: 'x4', nestedGroups: ['x4_APs']},
   {id: 'x5',content: 'x5', nestedGroups: ['x5_APs']},
   {id: 'x6',content: 'x6', nestedGroups: ['x6_APs']},
   {id: 'x7',content: 'x7', nestedGroups: ['x7_APs']},
   {id: 'x8',content: 'x8', nestedGroups: ['x8_APs']},

   {id: 'x1_APs',content: 'APs'},
   {id: 'x2_APs',content: 'APs'},
   {id: 'x3_APs',content: 'APs'},
   {id: 'x4_APs',content: 'APs'},
   {id: 'x5_APs',content: 'APs'},
   {id: 'x6_APs',content: 'APs'},
   {id: 'x7_APs',content: 'APs'},
   {id: 'x8_APs',content: 'APs'}
];

Changed to this...

var groups = new vis.DataSet();
groups.add([
   {id: 'x1',content: 'x1', nestedGroups: ['x1_APs']},
   {id: 'x2',content: 'x2', nestedGroups: ['x2_APs']},
   {id: 'x3',content: 'x3', nestedGroups: ['x3_APs']},
   {id: 'x4',content: 'x4', nestedGroups: ['x4_APs']},
   {id: 'x5',content: 'x5', nestedGroups: ['x5_APs']},
   {id: 'x6',content: 'x6', nestedGroups: ['x6_APs']},
   {id: 'x7',content: 'x7', nestedGroups: ['x7_APs']},
   {id: 'x8',content: 'x8', nestedGroups: ['x8_APs']},

   {id: 'x1_APs',content: 'APs'},
   {id: 'x2_APs',content: 'APs'},
   {id: 'x3_APs',content: 'APs'},
   {id: 'x4_APs',content: 'APs'},
   {id: 'x5_APs',content: 'APs'},
   {id: 'x6_APs',content: 'APs'},
   {id: 'x7_APs',content: 'APs'},
   {id: 'x8_APs',content: 'APs'}
]);

Now nested group visibility toggles as expected via the arrow by the group name.