Talk:ShowHide/Archive 2

I've got a problem
I've got a problem. This [hide] for Episodes should be on the right. Also adding style="background:#ACF", makes the [hide] disappear. &mdash; Balistic 19:02, September 5, 2009 (UTC)
 * That's due to the way you are marking up that template. JS and CSS can't do anything if you use bad markup. Instead of (which is a deprecated html tag) use . Also put the header on the same line as the div start/end tags, putting it on it's own like causes an extra   tag to be created which similarly forces a break. ~ NOTASTAFF Dantman(Local Talk &#8285; Animanga Talk)

Should NavPic be enabled ... or discarded
Dantman, wrt ShowHide I think the so-called magnify sprite ought to become the "collapseLink" whenever the NavPic class has been used. Currently that sprite is just a redundant link to the image's page in the File: namespace. This is the same href target as for the the image area itself.

What do you think?
 * Is that intuitive?
 * ... complex to implement?
 * ... simple enough to implement?

--najevi 08:50, November 10, 2009 (UTC)
 * That magnify glass only appears when using thumbs what you request could be a restriction for the people that dont use thumb. What i still dont understand is why Dantman is supporting the NavPic class since it got broken the moment the code got copy to en.wikipedia and then the CSS got "improve", the only wiki i have ever seen using this class has been the de.wikipedia where the original code comes --Cizagna (Talk) Central Dofus 23:00, 10 November 2009 (UTC)


 * Yes, I can see your point now. It would be messy to try and treat Thumb images differently within Show/Hide.


 * However, I wonder if the Show/Hide button function might shift to the image area itself. i.e when the reader clicks on the small image it expands the collapsed content. When they click on the large image it collapses the collapsible content. In other words since the image area istelf is the common feature let that assume the function of magnify/shrink in lieue of displaying show/hide buttons.


 * Again this would be enabled only when a div.NavPic element is specified and not when a div.NavFrame element is specified. I suppose that the Magnify sprite could one day be implemented by Wikia engineers and not coexist well with the div.NavPic. Who knows?


 * Otherwise the NavPic class label becomes superfluous baggage. --najevi 11:27, November 11, 2009 (UTC)

NavFrame link
See this 5 lines header and the link at the bottominstead the top right or top left and you can't fix it via CSS because then you are left with some ugly brakets at the end of your header also my header keeps changing size because of the show/hide changes while this is barely noticeable in english in other language this is not the case and can turn in to a very annoying thing --Cizagna (Talk) Central Dofus 09:00, 11 November 2009 (UTC)

I learned something by playing around with your question above! I'll call your multiple line text the "preamble text" rather than header text because I sincerely believe the header text should be outside of the div.NavFrame element. I'll refer to you note about the 'header' changing size the "collapsible content" in my explanation below.

The executive summary is that it is best to:
 * 1) place the header before the div.NavHead and preferably before the div.NavFrame
 * 2) avoid placing any preamble text in between the div.NavHead tags  and
 * 3) instead place it either immediately before or immediately after the first div.NavHead tag

If you play around with your Common.css to float the entire div.NavHead either right or left then you will see that the background color is really only there to draw attention to the Show/Hide button. You will see your preamble text rendered inside a border (due to NavFrame styles) that is obviously associated with both the Show/Hide button as well as the collapsible content.

First we float the Show/Hide buttons right. Of course this would be done in Common.css/Monaco.css/Monobook.css according to your site preference but I'll do it inline for these six examples. div.NavHead { float:right; } div.NavContent { clear:none; } See this 5 lines header and the link at the bottominstead the top right or top left and you can't fix it via CSS because then you are left with some ugly brakets at the end of your header also my header keeps changing size because of the show/hide changes while this is barely noticeable in english in other language this is not the case and can turn in to a very annoying thing
 * 1. Preamble text placed outside the div.Navframe (My old habit)

See this 5 lines header and the link at the bottominstead the top right  or top left and you can't fix it via CSS because then you are left with some ugly brakets at the end of your header also my header keeps changing size because of the show/hide changes while this is barely noticeable in english in other language this is not the case and can turn in to a very annoying thing
 * 2. Preamble is immediately before the div.Navhead

See this 5 lines header and the link at the bottominstead the top right or top left and you can't fix it via CSS because then you are left with some ugly brakets at the end of your header also my header keeps changing size because of the show/hide changes while this is barely noticeable in english in other language this is not the case and can turn in to a very annoying thing
 * 3. Preamble is immediately after the div.Navhead

Now we float the buttons left instead. It looks ugly if we don't clear:both before the collapsible content is displayed. div.NavHead { float:left; } div.NavContent { clear:both; } See this 5 lines header and the link at the bottominstead the top right or top left and you can't fix it via CSS because then you are left with some ugly brakets at the end of your header also my header keeps changing size because of the show/hide changes while this is barely noticeable in english in other language this is not the case and can turn in to a very annoying thing
 * 4. Preamble text placed outside the div.Navframe (My old habit)

See this 5 lines header and the link at the bottominstead the top right  or top left and you can't fix it via CSS because then you are left with some ugly brakets at the end of your header also my header keeps changing size because of the show/hide changes while this is barely noticeable in english in other language this is not the case and can turn in to a very annoying thing
 * 5. Preamble is immediately before the div.Navhead

See this 5 lines header and the link at the bottominstead the top right or top left and you can't fix it via CSS because then you are left with some ugly brakets at the end of your header also my header keeps changing size because of the show/hide changes while this is barely noticeable in english in other language this is not the case and can turn in to a very annoying thing
 * 6. Preamble is immediately after the div.Navhead

There you have it! Of the six examples the only one that I really don't like at all is #6. I think I might prefer #3 but then I suspect that could ask 12 people and get at least 5 different responses! Sorry I could not be any more helpful than that! --najevi 11:04, November 11, 2009 (UTC)
 * This alternatives are clever yet the issues are still there... and even more,
 * Test
 * Test
 * If i could tolerate this off-center effect then I would be using tables instead of divs and as said before it will keep changing making it noticeable depending on how long is each word on different languages.


 * Also doing this alternative way requires to go and create new way of coding for styles and HTML making it more complex to use and for me to go and apply them to every single div using navframe on the wikis I'm in charge (where im the only active sysop) is simply insane. So in my personal case, I prefer not to update my older version and if im force to i prefer not to use hide/show at all until the navframe bug is resolve. Hence why im asking for it to be corrected --Cizagna (Talk) Central Dofus 23:21, 11 November 2009 (UTC)

I am sorry! I had misunderstood your intent with the centered block of text in the earlier example. I did not think a header would ever be so many lines so assumed it was only preamble text. Since you are determined to make all text in the entire NavFrame container centered (I can only imagine you are presenting poetry or song lyrics or images in the NavContent container) then the best idea I can come up with is to also center align the ShowHide button.

You could place that above or below the Title as shown below. If the full width colored background is undesirable then you could set background:none inside NavHeader

Personally I would not use text-align-center across the entire NavFrame container for an article but I realize that you may have special requirements for your articles.

Test Test
 * 1 fix

Test Test
 * 2 fix alternative

Test Test
 * 3 fix alternative clean up

Going back to your original example with a new understanding of your goal, I think that the workaround is very simple.

See this 5 lines header and the link at the bottominstead the top right or top left and you can't fix it via CSS because then you are left with some ugly brakets at the end of your header also my header keeps changing size because of the show/hide changes while this is barely noticeable in english in other language this is not the case and can turn in to a very annoying thing
 * 4 original - fix with

or

See this 5 lines header and the link at the bottominstead the top right or top left and you can't fix it via CSS because then you are left with some ugly brakets at the end of your header also my header keeps changing size because of the show/hide changes while this is barely noticeable in english in other language this is not the case and can turn in to a very annoying thing
 * 5 original - fix with clr

or perhaps

See this 5 lines header and the link at the bottominstead the top right or top left and you can't fix it via CSS because then you are left with some ugly brakets at the end of your header also my header keeps changing size because of the show/hide changes while this is barely noticeable in english in other language this is not the case and can turn in to a very annoying thing
 * 6 original - fix with centered title in it's own div (button top-right)

and finally

See this 5 lines header and the link at the bottominstead the top right or top left and you can't fix it via CSS because then you are left with some ugly brakets at the end of your header also my header keeps changing size because of the show/hide changes while this is barely noticeable in english in other language this is not the case and can turn in to a very annoying thing
 * 7 original - fix with centered title in it's own div (button bottom-right)

Where there's a will there's a way! --najevi 03:47, November 13, 2009 (UTC)
 * As i said before for me its to much time consuming if i have to go and edit every single navframe that exists in the various wikis im the only active admin with no steady user/community who can really help me. Also as you may know im a helper in charge of the spanish community so the time i have available to attend my wikis is very short most of the time patrol so unless i devote a couple of months finding and updating navframes this is simply not achievable if i still need to edit every single navframe, hence why my request for fixing by simply wrapping the link and adjusting editing the CSS since i dont know jquery i would do my changes in a separate version. Also this situation applies also for other wikis where i can inform/suggest this JS but are on similar situation where they have to update every single navfram as that discouraging for them (as spanish wikis the communities are less participating that english ones) to change if they have to do so much work and will say "if its not broken, and we have to do so much... why change it?".
 * And as a separate note by doing this change your request below title "Beautiful buttons !" will be easier doing it via css as you can hide the braces using with  and telling to color the   plus rest of stuff --Cizagna (Talk) Central Dofus 17:32, 13 November 2009 (UTC)

A derivative of Dan's script
At w:c:test-najevi:ShowHide_usage/jQ-najevi-v2.js you'll find a derivative that addresses two issues raised above:
 * 1) The non-essential wrapping of the user specified button labels in square brackets
 * 2) * the default strings now include those square brackets explicitly and the user is free to change the default using the message feature provided for that
 * 3) The span.collapseLink element is now prepended inside the div.NavHead container.
 * 4) * I am fairly certain this is what Cizagna was asking for. (It biases the placement of the button to be above the heading text when the heading runs to multiple lines and that is really a matter of personal preference I guess.)

Just tweak your monaco.js as folows: importScriptPage('ShowHide usage/jQ-najevi-v2.js', 'test-najevi'); /* importScriptPage('ShowHide usage/jQ-najevi-v1.js', 'test-najevi'); importScriptPage('ShowHide/code.js', 'dev');

-- najevi 08:34, November 14, 2009 (UTC)

FYI the 2nd point mentioned above is not terribly important to the problem Cizagna was describing. It seems that getting rid of the text node appended to the div.NavHead is all that was really necessary. That text node was only created to contain the square brackets so removing it has not introduced any problems. You can verify this for yourself by importing jQ-najevi-v1.js (see above). -- najevi 09:55, November 14, 2009 (UTC)

Version 3 returns CSS styling power to the user
I was not satisfied with v2 (described above) because I realized that the fundamental problem was that the heading and the toggle button are sharing the same div.NavHead container. (This is at the heart of Cizagna's issue.)

Therefore, in version 3 what I have done is
 * 1) revived the use of div.NavToggle as the container for the toggle button
 * 2) and inserted that container after div.NavHead
 * 3) * this effectively makes the heading and the button separate. CSS can now be used to style/align one independently of the other.
 * 4) I found it necessary/expedient to add div.NavClear which was inserted immediately after div.NavToggle
 * 5) * it's sole purpose is to allow the user who wants to center-align the toggle button to do so by specifying a clear:both style to "push down" any text that might have been inserted after NavHead but before NavContent.


 * Details
 * http://test-najevi.wikia.com/wiki/ShowHide_usage/jQ-najevi-v3.js
 * demonstration and test pages
 * you must use  inside your personal monaco.js (see w:c:test-najevi:User:najevi/monaco..js) because I intentionally do not specify the source code at MediaWiki:Common.js
 * you must copy w:c:test-najevi:User:najevi/monaco.css to your own personal monaco.css - once again because I am keeping that test wiki free of any site-wide CSS (and JS) that might affect what you see when you experiment with the test pages.
 * w:c:test-najevi:ShowHide_usage
 * w:c:test-najevi:ShowHide_usage/Test_cases

Daniel, I did not understand why the tag might be used in a NavFrame. Therefore I left that line of code untouched. I do not have a test case to verify handling of a legend tag.


 * After a short break I plan to see if I can further extend Dan's code to implement my idea for "magnify/shrink" between a pair of images placed inside the NavPic container.

-- najevi 12:10, November 15, 2009 (UTC)


 * After some working out and streesing me to understand the differences in languages i found the following lines

var $buttonLink = $(' ').text( msg("hide") ) .onLink(function(e) { toggleNavigationBar( $(this).closest('.NavFrame') ); }); var $button = $(' ') $navHead.append( document.createTextNode(config.brackets.substr(0, config.brackets.length/2)), $buttonLink, config.brackets.substr(config.brackets.length/2) );
 * And was astonish that Daniel in fact had partially coded the span but was not actually using it at all, talk about wasting load times. So i add/change this

var $buttonLink = $(' ').text( msg("hide") ) .onLink(function(e) { toggleNavigationBar( $(this).closest('.NavFrame') ); }); var $button = $(' ') $button.append( document.createTextNode(config.brackets.substr(0, config.brackets.length/2)), $buttonLink, document.createTextNode(config.brackets.substr(config.brackets.length/2)) ); $navHead.prepend( $button );
 * For the clever eyes I change also the "append" for "prepend" because thats the way the old navframe handle that and since the documentation does not explain the reason of the change I'm in favor or avoiding compatibility issues unless needed
 * Now that I have something to target and it has a class i can use/add the following CSS

.NavToggle { float:right; position:absolute; top:0px; right:3px; } .NavHead {position:relative;}
 * This will let me handle left, right or center and with the absolute and relative combo it will not interface with the center alignment of the navhead like the old one
 * All this lets me obtain my desired effect of backward compatibility with out having to edit every navframe div already created so it can be adjusted.
 * Any way i will try to check tomorrow your 3 versions im curious to see how they will work and if i will require to edit the divs
 * --Cizagna (Talk) Central Dofus 10:30, 16 November 2009 (UTC)
 * New linkBefore config option and bug with the $button fixed. *sigh* I guess I have to watch this talkpage instead of expecting people to actually poke me when there is a bug in my code. ~ NOTASTAFF Dantman(Local Talk &#8285; Animanga Talk)

Beautiful buttons !
var ShowHideConfig = { autoCollapse: 3, userLang: false, en: { show: "[show]", hide: "[hide]", showAll: "[expand all]", hideAll: "[collapse all]" } };
 * 1) Note that the Common.css at this site refers to   when, in fact, the appropriate class label is
 * 2) I think that the square brackets ([...]) should be specified by the user rather than hard coded into the javascript. I realize the backward compatibility aspect of how it is done now. Backwards compatibility can be preserved by letting the default button labels include leading and trailing square brackets. Remember that a user can always customize those strings.

Removing hard coded square brackets from the NavHead DIV will allow a more contemporary button to be styled such as this one: show    without having those square brackets visible at either side: [show ]

.collapseLink { color:#002bb8; border:2px outset lightgrey; background-color:lightgrey; padding:3px 5px; font-weight:bold; }

--najevi 04:31, November 13, 2009 (UTC)


 * Brackets are not part of the link, adding those to the message would put them inside. I added a new brackets config, it takes a string such as "[]", "{}", and splits it up, things like "" will work and it'll split it up into and  . ~ NOTASTAFF Dantman(Local Talk &#8285; Animanga Talk)


 * That's odd, I just tested removing brackets altogether by specifying

 var ShowHideConfig = { brackets: '', };
 * however, the square brackets still appear outside my stylish lightgrey button.


 * What did you think of the NavToggle and NavClear classes for simplifying the styling of the button versus the heading? (see section just above this one) -- najevi 16:42, November 15, 2009 (UTC)
 * The answer is

 var ShowHideConfig = { brackets: ' ', };
 * The change Dantman made will pick a string and divide it in two parts the first part is the start of the link, the second or last part is the end of the link so by putting nothing is nothing so the code uses defaults the best way is to use 2 spaces that ways it gives 1 space for each side and 1 space alone with no letters in html its equal to not display.
 * --Cizagna (Talk) Central Dofus 06:23, 19 November 2009 (UTC)
 * Will work with brackets set to '' or false now. ~ NOTASTAFF Dantman(Local Talk &#8285; Animanga Talk)

french ?
Hi,

I've installed this on fr.guildwars and you can see on this page that it's always in english. In fact, maybe you can't see it but i assure you that if it's already translated to french, then there is a problem somwhere. Maybe i could just set my strings by overriding the english ones like it's clearly explained but i dont think this would be wise. Thanks. — TulipVorlax 02:17, January 31, 2010 (UTC)


 * One more example. — TulipVorlax 02:28, January 31, 2010 (UTC)


 * If you'd look at ShowHide/code.js you'll see that we only have i18n for English. And the documentation page explains how to customize messages for different languages. If you have another language, then either customize the messages, or post the translations here so they can be added. ~ NOTASTAFF Dantman(Local Talk &#8285; Animanga Talk)

Sure :

English : Show / Hide

French : Montrer / Cacher

— TulipVorlax 03:19, February 13, 2010 (UTC)


 * We also need show all and hide all. ~ NOTASTAFF Dantman(Local Talk &#8285; Animanga Talk)

Please see help forum thread
http://www.wikia.com/wiki/Forum:Need_a_show/hide_table --Timeshifter 16:58, January 31, 2010 (UTC)


 * See Collapsed table via NavFrame. I found that I could create show/hide capability with just one line added to
 * http://cannabis.wikia.com/wiki/MediaWiki:Common.js


 * For my needs I did not need to add any other JS or CSS. It might help others to copy this simple method to the ShowHide page. Maybe link to the page too: Collapsed table via NavFrame. --Timeshifter 16:33, February 2, 2010 (UTC)


 * I have since changed to using table wikitext for show-hide boxes instead of NavFrame wikitext. See
 * Forum:Collapsed table. Can't change background color. --Timeshifter 23:11, March 18, 2010 (UTC)

CSS is not discussed on ShowHide
Adding


 * importScriptPage('ShowHide/code.js', 'dev');

to MediaWiki:Common.js is easy enough.

Could a similar, single import line be created to pull in the relevant CSS to MediaWiki:Common.css?

CSS is not discussed at ShowHide.

I ended up copying and adapting CSS from here:
 * Help:Dynamic_navigation

See: [http://community.wikia.com/wiki/Forum:Collapsed_table._Can%27t_change_background_color Forum:Collapsed table. Can't change background color] --Timeshifter 23:07, March 18, 2010 (UTC)

Header Rows within tables
I am trying to find a way to show/hide header rows with all sub-rows as well as the table itself. Is there support for that? The code I am using apparently isn't getting the job done. Rappy 19:46, April 22, 2010 (UTC)


 * Thats simple. You are not reading the instructions on the page, your code should look like this and will act like the table to the right

 {| class="collapsible wikitable" !Testing !This should be collapsible.
 * - class="nocollapse"
 * This is a test
 * But it's not.
 * }
 * --Cizagna (Discusión) • Helper • Central hispana 08:53, 16 November 2010 (UTC)
 * --Cizagna (Discusión) • Helper • Central hispana 08:53, 16 November 2010 (UTC)

Dutch, German and French
// Dutch

nl: {

show: "tonen",

hide: "verbergen",

showAll: "alles tonen",

hideAll: "alles verbergen"

}

// German

de: {

show: "anzeigen",

hide: "verbergen",

showAll: "alle anzeigen",

hideAll: "alle verbergen"

}

// French

fr: {

show: "montrer",

hide: "cacher",

showAll: "montrer tous",

hideAll: "cacher tous"

} Mark  ( talk ) 12:13, June 27, 2010 (UTC)
 * Just to leave a trace --Cizagna (Discusión) • Helper • Central hispana 08:59, 16 November 2010 (UTC)

Some features are not working for me
I'm trying to make this work on the w:c:allods but some things are not working as described here. For example, the "[... This content(2) does not auto-collapse ...]" still collapses by default. I also can't add [show all] [hide all] buttons by copying the div text.

I added the importScriptPage('ShowHide/code.js', 'dev'); to my w:c:allods:MediaWiki:Common.js, and this bit for w:c:allods:MediaWiki:Common.css.

I have no idea how it works, so I would appreciate some help. -- IcecreamKitten

Is this working with Oasis?
I am an admin at my wiki, and I can see Oasis there when logged in, and when I have Oasis set in my preferences. Others see Monaco for now.
 * See: http://cannabis.wikia.com

Is it possible to import Javascript into Oasis as in Monaco? Show/hide does not seem to be working with Oasis in my wiki, and I haven't figured out yet how to get it to work. See:
 * http://cannabis.wikia.com/wiki/Category:Collapsible_box_templates

Show/hide works fine in Monaco. Not sure if Oasis is importing the necessary show/hide Javascript here:
 * http://cannabis.wikia.com/wiki/MediaWiki:Wikia.js

I added some custom CSS here: --Timeshifter 05:55, October 1, 2010 (UTC)
 * http://cannabis.wikia.com/wiki/MediaWiki:Wikia.css


 * I haven't checked if your code will work with other Skins than Monobook, but: Right now the  function does not work - that's on our list. --Avatar 00:01, October 2, 2010 (UTC)

(unindent) Since importing does not seem to be working yet, I have now copied the Javascript from here:
 * http://dev.wikia.com/wiki/ShowHide/code.js

I pasted it here:
 * http://cannabis.wikia.com/wiki/MediaWiki:Wikia.js

I still do not see any show/hide links. See: --Timeshifter 07:58, October 4, 2010 (UTC)
 * http://cannabis.wikia.com/wiki/Category:Collapsible_box_templates

The Oasis problem has been solved
The Oasis problem has been solved

See:
 * http://community.wikia.com/wiki/Forum:Show/hide_tables_no_longer_working_in_Oasis._Need_help

Paste the following into Common.js function importScriptPage (page, server) { var url = '/index.php?title=' + encodeURIComponent(page.replace(/ /g,'_')).replace('%2F','/').replace('%3A',':') + '&action=raw&ctype=text/javascript'; if (typeof server == "string") url = (server.indexOf('://') == -1)?'http://' + server + '.wikia.com' + url:server + url; return importScriptURI(url); }

importScriptPage('ShowHide/code.js', 'dev');

On the Cannabis wiki here is the relevant JS page:
 * http://cannabis.wikia.com/wiki/MediaWiki:Common.js

This will import the necessary show/hide JS necessary for show/hide tables to work correctly in both Monaco and Oasis skins. --Timeshifter 20:28, October 4, 2010 (UTC)

This still does not work for me. --w:c:unchartedwaters:User:©TriMoon™ 08:07, November 15, 2010 (UTC)
 * See our MediaWiki:Wikia.js, MediaWiki:Common.js, MediaWiki:Common.css
 * Then view Foodstuffs in both [?useskin=monobook monobook] and [?useskin=wikia wikia] skins, and you will notice the "Navigation" block has no "Show/Hide".


 * I am not an expert on show/hide coding. I see though, that the navigation table on the Foodstuffs page in the Wikia skin now has show/hide. It is open initially. I believe, if I am remembering correctly, that if there is only one show/hide table on a page, that it is open initially. This is if you are using that particular kind of show/hide wikitext. To change that something must be added, I believe, to the NavFrame wikitext at the top.


 * I use a different method in my wiki. Compare to the underlying wikitext in the show/hide tables here:
 * http://cannabis.wikia.com/wiki/Category:Collapsible_box_templates


 * It only uses this:  class="navbox collapsible collapsed" 
 * That is all that is needed to add a closed show/hide link to the top of the table. --Timeshifter 18:26, November 15, 2010 (UTC)


 * The problem of not showing in oasis was temporal and has been already fix. You should remove the codes you inserted in your MediaWiki:Common.js and MediaWiki:Wikia.js and follow instructions on the article page. Important thing to note is that JS and CSS pages are cache and sometimes take time to refresh from cache. --Cizagna (Discusión) • Helper • Central hispana 08:31, 16 November 2010 (UTC)

(unindent) Thanks. I struck out the added code in one of my above comments. I also removed it from Common.js on my wiki too. After removing the additional code the show/hide boxes continue to work fine on my wiki. They are listed here:
 * http://cannabis.wikia.com/wiki/Category:Collapsible_box_templates

Here is the JS and CSS I use:
 * http://cannabis.wikia.com/wiki/MediaWiki:Common.js
 * http://cannabis.wikia.com/wiki/MediaWiki:Common.css

I adapted the CSS from what is found here:
 * http://help.wikia.com/wiki/Help:Dynamic_navigation#In_your_MediaWiki:Common.css

MediaWiki:Common.js is the only place the JS import code needs to added. All skins will then use it.

importScriptPage('ShowHide/code.js', 'dev');

This is a good starting point in my opinion:
 * Joeyaa: Collapsible Templates. --Timeshifter 15:52, November 16, 2010 (UTC)

NavFrames & Oasis
I'm pretty sure the script worked with oasis in this wiki before, but it actually doesn't. Can you help me?
 * example page
 * our Common.js
 * our Wikia.js (empty)

And we have the same problem in this wiki. Thanks, --Weas-El (Talk) 18:45, December 1, 2010 (UTC)


 * I got the JS working in my wiki, and some CSS to work with it. You need both JS and CSS, I believe, for Show/Hide to work correctly. Here is the JS and CSS I use:
 * http://cannabis.wikia.com/wiki/MediaWiki:Common.js
 * http://cannabis.wikia.com/wiki/MediaWiki:Common.css


 * The relevant CSS is at the end and starts with


 *  /* Standard Navigationsleisten, aka box hiding thingy from .de. */ 


 * You can look at the wiki code, and see how I implement Show/Hide here:
 * http://cannabis.wikia.com/wiki/Category:Collapsible_box_templates


 * But I am not an expert, and don't have time to check out what you are doing. You might want to look at this:
 * Talk:ShowHide2


 * Cizagna replies there, and seems to be an expert. You can contact Cizagna here:
 * http://dev.wikia.com/wiki/User_talk:Cizagna
 * --Timeshifter 03:27, December 2, 2010 (UTC)


 * Thanks for your answer, I'll go over your code later. --Weas-El (Talk) 10:56, December 2, 2010 (UTC)


 * Something definitely seems to be broken regarding NavFrames; the examples on this page don't work either. -- Porter21 (talk) 07:59, December 3, 2010 (UTC)


 * Each wiki has to add the necessary show/hide JS and CSS. The show/hide tables listed in the category below work fine:
 * http://cannabis.wikia.com/wiki/Category:Collapsible_box_templates


 * There is different show/hide wiki code than is used in the above category. But the wiki code used in that category works with the JS and CSS added to that wiki (Cannabis Wiki).
 * --Timeshifter 08:09, December 3, 2010 (UTC)


 * I was talking about NavFrames (i.e. collapsible divs), not collapsible tables like the ones in the category you linked to. The templates on Weas-El's wiki also use the "collapsible div" portion of ShowHide, and not the "collapsible table" part. That collapsible tables are working is fine and dandy, but it really doesn't have much bearing on collapsible divs not working.


 * Collapsible divs do not work even on the dev wiki (i.e. here). I doubt the creator of the script wouldn't know how to set it up properly - and he was the one who did set it up here. -- Porter21 (talk) 08:58, December 3, 2010 (UTC)


 * See Talk:ShowHide2


 * Maybe Cizagna was discussing how to fix the NavFrame problem when Cizagna wrote this:


 * Their original show/hide now supports compatibility with the old navframe one, just needs to add


 * I don't know. I thought I read that NavFrames was the old method, and that collapsible tables was the new method. --Timeshifter 10:36, December 3, 2010 (UTC)

(unindent) NavFrames and collapsible tables are both old methods... they work on different types of elements, and which one is best to use varies by your use case. Eventually I had wanted to create a better more flexible new method, NavFrames and collapsible tables just exist in here for compatibility, this was basically a port of the Wikipedia script, rewritten completely in jQuery, half the size, more flexible, more features, and more efficient (jQuery's ready event fires earlier than MediaWiki's built in).

Now as for the bugs... I might as well point it out. Wikia broke ShowHide when they created Oasis. If you switch to monobook you'll see it still works, but in oasis it's broken, almost looking like it's working, but really NavFrames are broken where the show/hide link is inserted, but it actually never hides anything. I couldn't even figure out why myself,, I reported it anyways. Not like I'm optimistic anyways, I asked for a minor css change to do things the right and more flexible way and got rejected. I reported 3 extremely dangerous critical security vulnerabilities in the way Wikia is using MediaWiki in an unsupported configuration, they've only fixed the least critical so far.

It was worse for ArchiveTool... With Oasis Wikia has completely changed the base output, base ids always used in scripts, expected as a standard in all skins are changed, they violated Common.css no longer making it common "the idea is, there will be no 'common'" and making people put their common stuff in Wikia.css, meaning eventually people will start styling nothing but Wikia.css and for newer wikis anyone trying to visit in Monobook could start finding that styles aren't even being applied to that skin anymore.

Basically I've just gotten tired of it, didn't like Oasis anyways, so I've dropped my flag and am not bothering programming anything Wikia related anymore. ~ NOTASTAFF Dantman(Local Talk &#8285; Animanga Talk) 13:43, December 3, 2010 (UTC)


 * I know how you feel; Wikia has adopted a "we know best and don't need to listen to anybody" attitude that's quite irritating, especially when paired with a flurry of questionable decisions. Not loading Common.css for Oasis is among these; while fixable with a little @import, it requires more CSS knowledge than most people have.


 * As you're here - I hope you don't mind my changes to the ArchiveTool? The editors at my home wiki find it quite useful and would have hated to lose it, so I tried to make it work for the remaining skins.


 * Regarding ShowHide, changing the line

$navFrame.find('.NavPic, .NavContent').not($navFrame.find('.NavFrame .NavPic, .NavFrame .NavContent')).slideToggle;
 * to

$navFrame.find('.NavPic, .NavContent').slideToggle;
 * makes showing/hiding NavFrames work again (although you get a duplicate "show/hide" button). Not sure why this happens (I'm not an expert by any means), just to mention it. -- Porter21 (talk) 15:10, December 3, 2010 (UTC)
 * The purpose of the .not was supposed to make sure that the show/hide button does not toggle nav frames which are nested inside of another nav frame, which was part of the functionality of the original code iirc. ~ NOTASTAFF Dantman(Local Talk &#8285; Animanga Talk) 15:45, December 3, 2010 (UTC)
 * Yeah, it's rather strange. If I add a copy of the script to my wikia.js and remove the .not, collapsing works, duplicated show/hide buttons appear (of which only one works) - if I leave the .not in, collapsing doesn't work, the duplicated buttons appear but neither of them works. -- Porter21 (talk) 17:16, December 3, 2010 (UTC)


 * I'm still desperately looking for a way to fix the collapsible divs in w:c:inheritance (for example here) and w:c:canavansbooks (for example here). Please help! --Weas-El (Talk) 01:33, December 31, 2010 (UTC)

Summary
Please see:
 * Forum:Need help with ShowHide script

It summarizes some info for implementing Show/Hide with the Oasis/Wikia skin. --Timeshifter 07:21, January 10, 2011 (UTC)

Polish version
Hope you can add this to the script:

Anoon6 (talk | forum społeczności | Wikia Polska News) 17:46, January 17, 2011 (UTC)
 * Added. Cheers, Grunny  ( talk ) 23:53, January 17, 2011 (UTC)

Show/Hide help for a noob?
I am sorry to bug and feel stupid having to ask how this works since I have read the info what seems to be 100 times already.

I wanted to have a normal Show/hide section. I dont need tables tho they would be fine.

I have copied and pasted importScriptPage('ShowHide/code.js', 'dev'); into my MediaWiki:Common.js. Do i just post the little line importScriptPage('ShowHide/code.js', 'dev');

or do I post the whole code located in ShowHide/code.js.

I am using custom skin, not oasis or anything. I really want a simple show hide for archiving my news and couple other things. My site is http://duelsoftheplaneswalkers.wikia.com/wiki/Home_Page.

I am fairly new to editing so patience and a thurough explination would be very much appreciated.

Thanks again for any help. BornAProphet 04:30, February 3, 2011 (UTC)


 * Just add the import line. As I did here:
 * http://cannabis.wikia.com/wiki/MediaWiki:Common.js


 * The current version of show-hide is not working in the vector skin. It is working in the other skins. You also need to add CSS.


 * See also:


 * Forum:Need help with ShowHide script


 * It summarizes some show/hide info. --Timeshifter 06:03, February 3, 2011 (UTC)

NavFrames
Having read through the rest of this talk page... has anyone actually gotten NavFrames to show/hide properly in Monobook or Oasis? My home wiki uses collapsible navframes in several areas and they're broken in both skins (the NavFrames also don't work even on this dev page). We can rework things for tables, but if someone has gotten them working properly (without doubled links) I'd obviously prefer that. --lordebon 18:30, February 7, 2011 (UTC)


 * Can you link to a page with a broken collapsible navframe? --Timeshifter 20:22, February 7, 2011 (UTC)


 * Sure: this is our templatized implementation of it. But the navframes on the ShowHide page here on the dev wiki don't work either in either Monobook or Oasis. The content inside the frames is always shown and the hide/show links don't change that. Oddly clicking the hide/show links does change it between saying "Hide" and "Show" it just don't affect the visibility of the content navframe. --lordebon 19:45, February 14, 2011 (UTC)

(unindent). I managed to get show/hide to work on my wiki by importing the JS with the single line of code, and then adding some CSS. You are using a different method than what I use.

Your code from that page you linked to:

A Treatise on the Sport of Gnome Punting The sport of Gnome Punting... etc.

General wiki-code below for the Cannabis Wiki show/hide tables is from here:
 * http://cannabis.wikia.com/wiki/Category:Collapsible_box_templates

I only understand the method I use (barely understand). Maybe someone else can help you now that we see the problem more clearly. --Timeshifter 00:05, February 15, 2011 (UTC)


 * That probably works only because it's using a table rather than divs -- the table code seems to be working fine, we were just hoping to not have to rework things to use tables. Ah well, I'll look at converting our template to tables or perhaps trying our own code locally. Thanks for your replies, Timeshifter. --lordebon 14:22, February 23, 2011 (UTC)

Show all/Hide all not working
It's not working in here: http://meerundmehr.wikia.com/wiki/Geschichte:Alarm_f%C3%BCr_Waddle_8 (below "Staffel 1") - what's wrong with it? If useful: I'm on windows and mac, both on ff 3.6. I could really use that as opening so many stuff step by step is getting annoying, and I don't want spoilers to be visible :) Marc-Philipp   (Talk)  10:08, February 23, 2011 (UTC)
 * Per ShowHide, when Dantman wrote this, "All NavFrame blocks on the page are affected however, collapsible tables are not affected by these buttons. This behavior is by design." So Dantman made the Show/Hide all buttons only for NavFrames not collapsible tables. Cheers, Grunny  ( talk ) 02:42, February 24, 2011 (UTC)

Show/Hide button is not shown
I have a Navbox: http://spcfanfics.wikia.com/wiki/Template:Fan_Fiction_Articles The problem is - when this page is viewed in Opera 9.26 unlogged, the Hide/Show button is not shown. There is no such problem for Opera 10.01 and FireFox (both unlogged). Do you know what the problem is? Teyandee 18:31, June 1, 2011 (UTC)
 * Does this problem happen in this wikis show/hide examples? --Cizagna (Discusión) • Helper • Central hispana 07:00, 02 June 2011 (UTC)
 * Yes. Teyandee 15:48, June 2, 2011 (UTC)
 * I have found something that can help:
 * http://help.wikia.com/wiki/User:Teyandee/MLP - Button shows, but with is decreased when collapsed
 * http://runescape.wikia.com/wiki/Template:Navbox
 * Teyandee 21:40, June 4, 2011 (UTC)
 * Those are the old collapsible versions that don't have JQuery, I'm clueeles on the issue what worries me is the unlogged part that means that if you are logged you see and it works the show/hide with no problem? --Cizagna (Discusión) • Helper • Central hispana 05:35, 06 June 2011 (UTC)
 * When I view the http://mlp.wikia.com/wiki/Template:Transcripts unlogged (as a guest) via Opera 9.27 & 10.01 / FF 3.6.17 the show/hide button is shows and is working. Teyandee 16:27, June 6, 2011 (UTC)
 * The JS code for the show/hide at w:c:mlp:MediaWiki:Common.js and w:c:help:MediaWiki:Common.js are the same. Dont get me wrong I'm just pointing out details... its seems more than the explorer cant handle the code, what exactly I dont know but those wikis that you have show as example use older versions (really old versions) of the showhide, JQuery its just a set of JS tools that simplifies JS work. Its best that you upgrade all your explorer to the lastest stable version. --Cizagna (Discusión) • Helper • Central hispana 21:38, 06 June 2011 (UTC)
 * But why are you worrying? It may be an old version but it works. At least for me. And now the button do shows in Opera 9. Teyandee 16:28, June 7, 2011 (UTC)


 * On the other hand, a new version will be better. Such as w:c:dragonage:MediaWiki:Common.js - it has jQuery and the show/hide button works.


 * The question is: Do I really have to use the new version? Teyandee 16:55, June 7, 2011 (UTC)
 * Dragonage is also using an old version of show/hide, the Jquery code it has is about other stuff... What is worrying me is the fact that it only affects unlogged in other words when you are log you have no issues but when you are unlog you have issues.
 * About your question of using the newer version "thats your call"... newer versions just have more functionalities or effects, sometimes less or simple coding which translateds sometimes is faster processing or faster loading of a page. But if you like the old version... well use the old version as i told you its your call.
 * --Cizagna (Discusión) • Helper • Central hispana 00:46, 08 June 2011 (UTC)
 * I understand the advantages of the new version but hee we have an issue which prevents me form using it: It is easier for me to create a Navbox by using w:c:spcfanfics:Template:Navbox than by using something like this: ShowHide. Providing no special functional is needed (like the pictures) I think I will use the current version. Teyandee 16:36, June 8, 2011 (UTC)