Main Content

Using WC Show Hide

Expand and Collapse

You can use the toggle class of WC ShowHide to create expand and collapse functionality:

Expand and Collapse Text

Here is an example of expand and collapse text click here to showhide the details below.

Here is more text that displays.

The CSS

The WC Show Hide requires CSS styles to be added. You can do this by linking to a content.css and pasting the folowing CSS into that file:

/* style your showme content... */
/*default appearance when it is toggled off */
.showme { display: none; }

/* "toggle" appearance for when it is clicked on, and, for accessibility
purposes, show "nojs" for those who do not have javascript and cannot get
javascript to recognize the click */
.showme.toggle, .showme.nojs { display: inline; }

/* style the "Show" and "Hide" links so that the approproate text is shown */
.showtxt.showme { display: inline; }
.showtxt.showme.toggle { display: none; }
.hidetxt.showme { display: none; }
.hidetxt.showme.toggle { display: inline; }
The HTML

Use the CSS above along with any additional styles you need. Then add HTML similar to the example below:

<p>INSERT TEXT HERE
<a href="#" class="clickme" id="textexample">
<span class="showtxt textexample showme">Show</span>
<span class="hidetxt textexample showme">Hide</span>
</a>
</p>

<p class="textexample showme nojs">INSERT HIDDEN CONTENT HERE</p>

Expand and Collapse Icon

NOBODY expects the Spanish Inquisition! Amongst our weaponry...  

  • fear
  • surprise
  • ruthless efficiency...
The CSS

The WC Show Hide requires CSS styles to be added. You can do this by linking to a content.css and pasting the folowing CSS into that file:

/* style your showme content... */
/*default appearance when it is toggled off */
.showme { display: none; }

/* "toggle" appearance for when it is clicked on, and, for accessibility
purposes, show "nojs" for those who do not have javascript and cannot get
javascript to recognize the click */
.showme.toggle, .showme.nojs { display: inline; }

/* style the "Show" and "Hide" links so that the approproate text is shown */
.showtxt.showme { display: inline; }
.showtxt.showme.toggle { display: none; }
.hidetxt.showme { display: none; }
.hidetxt.showme.toggle { display: inline; }

/*style for icon*/
.sm_iconbutton3d img {margin: 5px 0 0 3px;}
The HTML

Use the CSS above along with any additional styles you need. Then add HTML similar to the example below:

<p>INSERT TEXT HERE 
<a href="#" class="clickme sm_iconbutton3d" id="iconexample">
<img src="images/arrow_dn.png" class="showtxt iconexample showme"/>
<img src="images/arrow_up.png" class="hidetxt iconexample showme"/>
</a>
</p>

<div class="iconexample showme nojs">INSERT HIDDEN CONTENT HERE</div>

Expand and Collapse 3D Button

Under the hood...

Under the hood...

WC Show Hide is our custom jquery plugin.  jQuery is a collection javascript code libraries that we can reuse for our own purposes. 

WC Show Hide works by detetecting what happens to any HTML object and then adding classes to HTML objects based on what happens.  If an object with the clickme class is clicked or hovered over, WC Show Hide gets the id of this object and searches for all HTML objects with the showme class that have classes that match this id.

For example, an object with the class clickme and the id example1 is clicked.  WC Show Hide adds the click class to all objects that have both the showme and example1 classes.

The CSS

The WC Show Hide requires CSS styles to be added. You can do this by linking to a content.css and pasting the folowing CSS into that file:

/*style for 3D button */
#showbtn {display:inline-block;}
#showbtn.nojs, #showbtn.toggle {display:none;}

/*style for under the hood container */
#showmorebox {display:none;}
#showmorebox.nojs, #showmorebox.toggle {display:block;}
The HTML

Use the CSS above along with any additional styles you need. Then add HTML similar to the example below:

<!-- button when nothing else is shown -->
<p class="button3d clickme showme hidebtn showbtn nojs" id="showbtn">INSERT BUTTON TITLE HERE</p>

<!-- content and button -->
<div class="newcolorbox showme showbtn hidebtn nojs" id="showmorebox">
<p class="button3d clickme" id="hidebtn">INSERT BUTTON TITLE HERE</p>
INSERT HIDDEN CONTENT HERE
</div>

Top of page