Topic on Project:Support desk

Broken custom toggle JavaScript

10
AtomicMario (talkcontribs)

Hello. I'm an interface admin on Encyclopædia Dramatica (where I go by "MarioMario456"). The wiki has this JavaScript that extends the MediaWiki custom toggle by allowing a toggle button with expand/collapse text anywhere (this is used on series templates). However, sometimes it doesn't work:

$(document).ready(function() {
	$(".collapsibletoggletext").click(function() {
		$(this).parent().children(".collapsibletoggletext").removeClass("hiddentext");
		$(this).addClass("hiddentext");
	});
});

For those JavaScript-illiterate, it's: When the page has loaded, when an object with the class "collapsibletoggletext" is clicked, all other objects with the class "collapsibletoggletext" in the parent have the class "hiddentext" (which has the CSS "display:none", meaning it's hidden) removed, while the "collapsibletoggletext" that was clicked has the "hiddentext" class added.

Here's an example:

[<span class="mw-customtoggle-example collapsibletoggle showhidetext"><span class="collapsibletoggletext hiddentext">Collapse</span><span class="collapsibletoggletext">Expand</span></span>]
<div id="mw-customcollapsible-example" class="mw-collapsible mw-collapsed">Hello World!</div>
Jonathan3 (talkcontribs)

I guess this is a question rather than an announcement... I'm semi-literate in JavaScript, so give some more details and I'll have a look :-) Have you noticed any patterns in relation to when it works and when it doesn't?

AtomicMario (talkcontribs)

When it works, the text changes when you click it. When it doesn't, the text stays the same. For a page that has this, keep clicking "Random page" until you find a page with an collapsible gallery. The toggle text should change when you click it, but sometimes it doesn't.

Jonathan3 (talkcontribs)

Meet me half way and share a link of a page that doesn't work!

AtomicMario (talkcontribs)

@Jonathan3 Don't know what triggers the bug, it happens entirely by chance. Just click "Random page", until you find a page in which the toggle text doesn't change.

Jonathan3 (talkcontribs)

Not sure I want to risk that :-) When the javascript above breaks, does all javascript on the page stop working too (dropdowns or whatever)? I had that once and can't for the life of me remember what fixed it. That's not much help but I'll have a think. It might have been something seemingly unrelated - maybe an old extension, or DuckDuckGo Privacy Essentials/an adblocker?

65.92.83.38 (talkcontribs)

I don't see any problem with the jQuery code. I'm guessing your custom javascript doesn't always load.

65.92.83.38 (talkcontribs)

when the bug occurs, check, using your browser, that a click event is attached to the elements (as desired). If not, then your javascript isn't always loading.

AtomicMario (talkcontribs)

Other parts of the local javascript work, just not the custom toggle collapse code.

AtomicMario (talkcontribs)

Finally figured it out. The wiki has a file called "st/ed_global.js", which has a collapse script that is conflicting with the one on MediaWiki:Common.js. It is very broken, so I told the server admin to delete it. Plus, most of it is already on MediaWiki:Common.js.

Reply to "Broken custom toggle JavaScript"