Docs > Extensions > Plugins > Showhide

This script adds the ability to create a link or button, that makes visible some section of the page when you click it. And then hides it when yo click it again.

To use, install as usual. Simply add this line to site.config:


Then, create a div, p, or span (or box) with a unique id like id=abc. Then put [(showhide "Click here" id=abc)] wherever you want to put the link you use to click that div on and off.

Possible parameters include
  • fmt=link - create a link instead of a button.
  • init=show - object will start out visible. By default it starts hidden.
  • show=text - link text or button label to be shown when closed (needs to be shown)
  • hide=text - link text or button label to be shown when open (needs to be hidden)

Here are some examples of what you can do with this script:

1. Getting Started

Let's start with a really basic example. Click the warning button to see the effect. Then click it again to see it reversed.
[(showhide WARNING id=one)]
<span id=one>img:warning.gif</span>

2. Advanced Options

In this code I've set the div to be visible initially, and shown how to include an entire page, plus added some styling! I've also made the trigger a link instead of the default button. Note you can put the div anywhere you want on the page. It does not have to be next to the trigger.
[(showhide 'LOGIN FORM' id=two init=show fmt=link)]
<div id=two style="background-color: yellow; padding: 20px; float:right; width=300px">
[(include action.login)]


You are not logged in.

3. Image Links

This one uses an impage to trigger the action. I've also used a table to better display where I want the block to show.
[t][r][c][(showhide 'USING SPANS' id=three label=img:ds.jpg fmt=link)][c]     [c]<div id=three style='border: 1px solid black; padding: 20px;'>Put some information about this sword here</div>[t]

Put some information about this sword here

4. Nested Divs

In this last example I've put one showhide dive inside another. Your browser will remember the status of the inside div even if you close the outside div. Note too, I used the box markup to create my div.

[(showhide 'SOME STUFF' id=four)]
<box 'MORE STUFF' id=four bgcolor="#ac3">
[t][r][c][(showhide id=five show='[ + ]' hide='[ - ]' fmt=link)][c]<span id=five style="background-color: #edf;">NESTED STUFF</span>[t]