Toggle class does not maintain active state when inside control-content class

[CoinDev]

Toggle does not maintain active state when inside control-content class. Specifically if you cycle through the tabs created from multiple control-content class tabs the toggle state is not preserved or set to off when in a active (on) position.

[keviniamburg]

+1

[keviniamburg]

I figured out the reason for this. In segmented-controllers.js when a new tab is being displayed, it's removing the class "active" throughout. It's removing the .active class from the toggles as well. I changed the segmented-controllers related tab class to "activeTab" instead, and modified the CSS as well. This solved the problem for me.

[brianlittmann]

As @slickdev mentioned, the issue lies in lines 55-59 of segmented-controls.js:

activeBodies = targetBody.parentNode.querySelectorAll(classSelector);

for (var i = 0; i < activeBodies.length; i++) {
    activeBodies[i].classList.remove(className);
}

targetBody.parentNode in this case is the wrapper div, i.e. .content or .control-content, and if the segmented controls are in that same div, then the active class is removed from them as well (undesirably).

I simply scoped the activeBodies query to active .control-content:

activeBodies = targetBody.parentNode.querySelectorAll('.control-content' + classSelector);