Main Content
Using WC Show Hide
Click to Show Tutorial
WC Show Hide has a click class that allows you to create content to appear after an object is clicked and then remain shown. The following is a simple example of what you can do with the click class:
Click 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... */
/*default appearance before it is clicked */
.showme { display: none; }
/* "click" appearance for after it is clicked, and, for accessibility purposes,
show "nojs" for those who do not have javascript and cannot get javascript to recognize the click */
.showme.click, .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... */
/*default appearance before it is clicked */
.showme { display: none; }
/* "click" appearance for after it is clicked, and, for accessibility purposes,
show "nojs" for those who do not have javascript and cannot get javascript to recognize the click */
.showme.click, .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">Click Me</div></div>
<div class="showme simpleclick01 nojs">Show Me</div>