Forum:Show-Hide button

I've seen on Wikipedia a "show-hide" tab on the side of some headers (similar to the "dismiss" thing on the sitenotice about the fundraising on Wikimedia). Does anyone know how this works and what markup to use? I thought it was something to do with "NavHead" but that didn't work. I've searched Mediawiki.org and meta, but haven't come up with anything. Scott ch 08:49, 24 January 2007 (UTC)


 * Read over Forum:ShowHide content. Dantman (Talk) 08:52, 24 January 2007 (UTC)
 * Hmm, thanks, should've read over the current topics. Do you know, if I put that js he's talking about into MediaWiki:COmmon.js, will it show up for everyone on the wiki?  Even unregistered users?  Scott ch 08:55, 24 January 2007 (UTC)
 * Actually, that's not a page. Isn't there a common js page in the MW namespace that will apply to all users, regardless of skin?  Scott ch 08:56, 24 January 2007 (UTC)
 * There isn't one yet. MediaWiki:Common.js is supported in a future version which we will upgrade to in a few weeks (I hope). Use MediaWiki:Monobook.js for now. --Splarka (talk) 10:14, 24 January 2007 (UTC)

I hear tell that Show/Hide doesn't work in all browsers. I am looking for a solution that will work for everyone, so that we can hide TV spoilers - in this case, it would be really bad if the text were visible to some people. Would a nonworking Show/Hide reveal the text or make it impossible to see? Are there any other solutions that might work better? --StBacchus 23:57, 24 January 2007 (UTC)


 * You could make it default-hidden with CSS, so that they would see nothing if they had no javascript. I'll work on a sample later--Splarka (talk) 02:28, 25 January 2007 (UTC)

Sample
An example-let: w:c:communitytest:Spoilers. Unlike Dynamic Navigation it has a failsafe defaulting to hidden. It should operate in most browsers as you wish:
 * If user has JS that supports it, it acts sort of like Dynamic Navigation but defaulting to hidden. All spoilers show at once though (I was lazy).
 * If user has no JS, you can use CSS hilight, hover the mouse over the text and it will show.
 * If user has old IE or other non-CSS browser, highlight the text with your mouse cursor.

In MediaWiki:Common.css: /* JS-less spoiler fallback (will not work on all browsers, some may have to hilight) */ .spoiler-content:hover { color:#000000 !important; }

In MediaWiki:Monobook.js: addOnloadHook(spoilers); function spoilers { for(var i=0; spoil = document.getElementsByTagName('span')[i]; i++) { if ((spoil.getAttribute('class') == "spoiler-tip")) { spoil.innerHTML='(toggle spoilers)'; }   }    for(var i=0; spoil = document.getElementsByTagName('div')[i]; i++) { if ((spoil.getAttribute('class') == "spoiler-content")) { spoil.style.color='#000000'; spoil.style.display='none'; }   } }

function togglespoilers { for(var i=0; spoil = document.getElementsByTagName('div')[i]; i++) { if ((spoil.getAttribute('class') == "spoiler-content")) { if(spoil.style.display=='block') { spoil.style.display='none'; } else { spoil.style.display='block'; }       }    } }

Template setup:  Spoilers (highlight, select or hover) 

Content of class="spoiler-tip" span is replaced by "javascript:togglespoilers" if JS is enabled. It should contain by default then the instructions for non-JS users.

--Splarka (talk) 11:55, 26 January 2007 (UTC)

Thanks! I appreciate the help. --StBacchus 13:06, 27 January 2007 (UTC)