Main Content

Using WC Show Hide

Hover to Show or Hide Tutorial

WC Show Hide has a hover class. Hover allows you to create content to appear and disappear as the mouse hovers on an object.  The following is an example of what you can do with the hover class:

Hover on 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; }

/* "hover" 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 hover */
.showme.hover, .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">Hover on Me</div>
<div class="showme simpleclick01 nojs">Show Me</div>
</div>

Top of page