Main Content
Using WC Show Hide
WC Show Hide: Show/Hide as Radio Series
WC Show Hide has a radio class. Radio allows you to create groups of content that function like a radio group, where only one clickable object and corresponding content item will be displayed at a time. The following are examples of what you can do with the radio class:
Simple Radio
- Click Here 1
- Show Me 1
- Click Here 2
- Show Me 2
- Click Here 3
- Show Me 3
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 selected */
.showme { display: none; }
/* "radio" appearance for after it is selected, and, for accessibility purposes,
show "nojs" for those who do not have javascript and cannot get javascript to recognize the click */
.showme.radio, .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 selected */
.showme { display: none; }
/* "radio" appearance for after it is selected, and, for accessibility purposes,
show "nojs" for those who do not have javascript and cannot get javascript to recognize the click */
.showme.radio, .showme.nojs {
display: inline;}
[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:
<dl id="simpleradio">
<dt class="clickme" id="example01">Click Here 1</dt></dl>
<dd class="showme example01 nojs">Show Me 1</dd>
<dt class="clickme" id="example02">Click Here 2</dt>
<dd class="showme example02 nojs">Show Me 2</dd>
<dt class="clickme" id="example03">Click Here 3</dt>
<dd class="showme example03 nojs">Show Me 3<</dd>
Radio with Default Selection
- Click Here 1
- Show Me 1
- Click Here 2
- Show Me 2
- Click Here 3
- Show Me 3
Use the CSS above along with any additional styles you need. Then add HTML similar to the example below:
<dl id="simpleradio">
<dt class="clickme" id="example01">Click Here 1</dt></dl>
<dd class="showme example01 nojs radio">Show Me 1</dd>
<dt class="clickme" id="example02">Click Here 2</dt>
<dd class="showme example02 nojs">Show Me 2</dd>
<dt class="clickme" id="example03">Click Here 3</dt>
<dd class="showme example03 nojs">Show Me 3<</dd>