Main Content
Using WC Show Hide
WC Show Hide: Overview
The WC Show Hide script is an improved version of the old show/hide scripts. By using HTML and CSS you can set almost any set of objects to show on a single click, show/hide as a a toggle, show/hide as a radio series, and/or show/hide on hover.
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 following are styles added by WC Show Hide:
- click - style is added when an object is clicked
- toggle - style is toggled off and on when an object is clicked
- radio - style is added when an object is clicked and removed from all other objects
- hover - style is added when hovering on an object and removed after
In general, all WC Show Hide scripts will require the following:
- CSS styles for shown content
- CSS styles for hidden content (eg. display:none;)
- default CSS styles for users who can't use WC show hide
- HTML with objects that include these styles
To see some examples in action, view the following pages in this TEMPLATE 101 lesson.