All 3 of these should produce the same results, but they don't:
<span class="mw-customtoggle-I">Nest I</span>
<ol class="mw-collapsible mw-collapsed" id="mw-customcollapsible-I">
<li>
<span class="mw-customtoggle-IIA">Nest IIA</span> <ol class="mw-collapsible mw-collapsed" id="mw-customcollapsible-IIA" style="list-style-type:upper-alpha"> <li> content </li> </ol>
</li>
<li>
<span class="mw-customtoggle-IIB">Nest IIB</span> <ol class="mw-collapsible mw-collapsed" id="mw-customcollapsible-IIB" style="list-style-type:upper-alpha"> <li> content </li> </ol>
</li>
<li>
<span class="mw-customtoggle-IIC">Nest IIC</span> <ol class="mw-collapsible mw-collapsed" id="mw-customcollapsible-IIC" style="list-style-type:upper-alpha"> <li> content </li> </ol>
</li>
</ol>
<table class="wikitable">
<tr>
<th class="mw-customtoggle-I" style="background-color:#ccccff;">Nest I</th>
</tr>
<tr class="mw-collapsible mw-collapsed" id="mw-customcollapsible-I">
<th class="mw-customtoggle-IIA">Nest IIA</th>
</tr>
<tr class="mw-collapsible mw-collapsed" id="mw-customcollapsible-IIA">
<td> content </td>
</tr>
<tr class="mw-collapsible mw-collapsed" id="mw-customcollapsible-I">
<th class="mw-customtoggle-IIB">Nest IIB</th>
</tr>
<tr class="mw-collapsible mw-collapsed" id="mw-customcollapsible-IIB">
<td> content </td>
</tr>
<tr class="mw-collapsible mw-collapsed" id="mw-customcollapsible-I">
<th class="mw-customtoggle-IIC">Nest IIC</th>
</tr>
<tr class="mw-collapsible mw-collapsed" id="mw-customcollapsible-IIC">
<td> content </td>
</tr>
</table>
<table class="wikitable">
<tr>
<th class="mw-customtoggle-I" style="background-color:#ccccff;">Nest I</th>
</tr>
<tr class="mw-collapsible mw-collapsed" id="mw-customcollapsible-I">
<th class="mw-customtoggle-IIA">Nest IIA</th>
</tr>
<tr class="mw-collapsible mw-collapsed" id="mw-customcollapsible-I mw-customcollapsible-IIA">
<td> content </td>
</tr>
<tr class="mw-collapsible mw-collapsed" id="mw-customcollapsible-I">
<th class="mw-customtoggle-IIB">Nest IIB</th>
</tr>
<tr class="mw-collapsible mw-collapsed" id="mw-customcollapsible-I mw-customcollapsible-IIB">
<td> content </td>
</tr>
<tr class="mw-collapsible mw-collapsed" id="mw-customcollapsible-I">
<th class="mw-customtoggle-IIC">Nest IIC</th>
</tr>
<tr class="mw-collapsible mw-collapsed" id="mw-customcollapsible-I mw-customcollapsible-IIC">
<td> content </td>
</tr>
</table>
The problem is in the last table. Tables can't be nested the way lists can, so nested toggle behavior can only be done by adding the toggle id's from all of the toggles you want to be able to toggle the element. Each toggle id needs to function in an OR relationship, where ANY 1 of the toggles will toggle the element. I haven't looked at the code myself, but I think it's trying to function only in an AND relationship, where all of the toggles need to be triggered to toggle the element.
That's the only way I can think of to nest toggle functionality with elements that are not syntactically nestable. The result is that only the first table is usable, and it only collapses the elements when they are toggled in the reverse order they were expanded (LIFO order).
Version: 1.18.x
Severity: normal