Main Content
Using WC Show Hide
Toggle to Show/Hide Tutorial
WC Show Hide has a toggle class. Toggle allows you to create content to appear and disappear after an object is clicked. The following are examples of what you can do with the toggle class:
Simple Toggle
Toggle Me
Show Me
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 folowingCSS into that file:
/* style your clickme images */
.clickme { [add additional styles for clickme images] }
.clickme:hover { [add additional styles for hovering on clickme images] }
/* style your showme content */
.showme { display: none; }
.showme.toggle, .showme.nojs {
/* add other styles as needed to style the images and content */
.clickme { [add additional styles for clickme images] }
.clickme:hover { [add additional styles for hovering on clickme images] }
/* style your showme content */
.showme { display: none; }
.showme.toggle, .showme.nojs {
display: block;}
[add additional styles for showme content]
/* add other styles as needed to style the images and content */
The HTML
Use the CSS above along with any additional styles you need. Then add HTML similar to the example below:
<div>
<div class="clickme" id="simpleclick01">Toggle Me</div></div>
<div class="showme simpleclick01 nojs">Show Me</div>
Advanced Toggle
ShowHide
Show Me
The CSS
Like the previous example, WC Show Hide requires CSS styles to be added to your content.css for advanced toggle function.
/* add default styles to clickable objects */
.clickme { color: blue; text-decoration: underline; }
.clickme:active, .clickme:hover { text-decoration: none; }
/* 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: block; }
/* style the "Show" and "Hide" links so that the approproate text is shown */
.showtxt.showme { display: block; }
.showtxt.showme.toggle { display: none; }
.hidetxt.showme { display: none; }
.hidetxt.showme.toggle { display: block; }
.clickme { color: blue; text-decoration: underline; }
.clickme:active, .clickme:hover { text-decoration: none; }
/* 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: block; }
/* style the "Show" and "Hide" links so that the approproate text is shown */
.showtxt.showme { display: block; }
.showtxt.showme.toggle { display: none; }
.hidetxt.showme { display: none; }
.hidetxt.showme.toggle { display: block; }
The HTML
Use the CSS above along with any additional styles you need. Then add HTML similar to the example below:
<div class="clickme" id="example00">
<div class="showme example00">Show Me</div>
<!-- Separate the two states for the clickable object into showtxt and hidetxt classes. Both will have the showme style. --></div>
<span class="showtxt showme example00">Show</span>
<span class="hidetxt showme example00">Hide</span>
<div class="showme example00">Show Me</div>