Last modified: 2012-01-01 04:39:00 UTC
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).
There is a demo of this bug here (login with Demo/test): http://www.coincompendium.com/w/index.php/Sandbox/Bug_33451
I'll check this out further at a later time, but right now I notice that the same ID is used multiple times, that's impossible in the browser DOM model, simply doesn't exist.
Also, an element can have only one ID, not several separated by space. This is the way the HTML specification works, not MediaWiki specific.
One more thing, using that example (and the login you gave me earlier) in Google Chrome works fine for me. All three "List 1" will toggle the list and the two tables. All three "Nest IIA", "Nest IIB" and "Nest IIC" trigger the content in the first table and in the list. It will not trigger the content in the third table, and that's perfectly fine. Considering the content cell there has an ID of "mw-customcollapsible-I_mw-customcollapsible-IIB" which has no trigger anywhere.
Resolved further on IRC. Marking invalid.
OK, I got the cause wrong so it's not a bug, but perhaps I can come up with something as an enhancement. My original title for this report was: "MakeCollapsible nesting of toggle id's does not work". It seems there's no way to get nested behavior in non-nested elements - at least not with id's. Doing it with classes does not toggle at all. For non-nested elements, like in a table, it'll probably have to do some sort of smart toggling where if it collapses a parent element, it also collapses child elements, without blindly toggling them to a different state (possibly expanding them instead of collapsing). I'm not sure how that should be approached, but I think it'll have to be done in the JS, with some new usage methods. Most importantly, I think it'll have to work with classes in addition to id's. Dynamically generated tables would need to also have dynamically generated id's, which is unnecessary if it works with classes. Is that doable, or is there a technical reason why it only works with id's?
I was hoping there was a better solution than nesting entire groups of code in non-naturally nested elements, but it does work that way. For some nested table nightmares, have a flashback to 1990: http://www.coincompendium.com/w/index.php/Sandbox/Nested_MakeCollapsible
