Help:Show and hide

Show/hide links
STOWiki has some generic javascript set up to enable show/hide links that work in the same manner as the show/hide links on the table of contents. There are two steps to setting it up on a page or template:


 * 1) Setting up the show/hide link
 * 2) Adding a class or ID to what would be hidden or shown

Using an ID to mark what to show or hide
Using an ID is the best way to go if only one thing needs to be shown or hidden when the link is clicked, such as a single. It can't be used if you need to, for example, hide multiple rows of a table, though, since only one element on a page is supposed to have a given ID.

Creating the link
Add the following where you want the link to appear:

&lt;span id="showHide-elementName" class="showHideById"&gt;&lt;/span&gt;

Change  to a descriptive name for the element that will be affected by the link. Do your best to make sure it's something unique. Do not use spaces and avoid special characters; using just letters and numbers is best.

If you would like the element to be hidden when the page loads, use this instead:

&lt;span id="showHide-elementName" class="showHideById hideOnLoad"&gt;&lt;/span&gt;

And change  as described above.

It is currently possible to have only one show/hide link for a given ID.

Adding the ID to the element
One of the easiest ways to attach an element to the show/hide link is to wrap it in a, such as below:

&lt;div id="elementName"&gt; The content to show or hide goes here &lt;/div&gt;

If the content to be shown and hidden is an entire table, you could do this instead:

In both cases,  needs to be changed to the same ID you chose in the previous step.

Using a class to mark what to show or hide
Using a class is necessary if you want to attach one show/hide link to multiple elements, such as several table rows. It's a slightly less efficient method and may be less compatible with older browsers, so its best to use the ID method when you can.

Creating the link
Add the following where you want the link to appear:

&lt;span id="showHide-className" class="showHideByClass"&gt;&lt;/span&gt;

Change  to a descriptive name for the elements that will be affected by the link. Do your best to make sure it's something unique. Do not use spaces and avoid special characters; using just letters and numbers is best.

If you would like the elements to be hidden when the page loads, use this instead:

&lt;span id="showHide-className" class="showHideByClass hideOnShow"&gt;&lt;/span&gt;

And change  as described above.

It is currently possible to have only one show/hide link for a given class.

Adding the class to the elements
To attach the link to multiple table rows, add the class to each table row as demonstrated below:

In both cases,  needs to be changed to the same class name you chose in the previous step.

If you need to specify another class for the element to be hidden, simply add them separated by spaces, such as:

&lt;div class="leftColumn className"&gt;&lt;/div&gt;