WCLD101:

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. 

Under the hood...

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.

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:

The HTML

Use the CSS above along with any additional styles you need. Then add HTML similar to the example below:

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

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:

The HTML

Use the CSS above along with any additional styles you need. Then add HTML similar to the example below:

Advanced Toggle

The CSS

Like the previous example, WC Show Hide requires CSS styles to be added to your content.css for advanced toggle function.

The HTML

Use the CSS above along with any additional styles you need. Then add HTML similar to the example below:

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:

The HTML

Use the CSS above along with any additional styles you need. Then add HTML similar to the example below:

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:

The HTML

Use the CSS above along with any additional styles you need. Then add HTML similar to the example below:

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:

Expand and Collapse

You can use the toggle class of WC ShowHide to create expand and collapse functionality:

Expand and Collapse Text

Here is an example of expand and collapse text click here to showhide the details below.

Here is more text that displays.

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 folowing CSS into that file:

The HTML

Use the CSS above along with any additional styles you need. Then add HTML similar to the example below:

Expand and Collapse Icon

NOBODY expects the Spanish Inquisition! Amongst our weaponry...  

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 folowing CSS into that file:

The HTML

Use the CSS above along with any additional styles you need. Then add HTML similar to the example below:

Expand and Collapse 3D Button

Under the hood...

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 folowing CSS into that file:

The HTML

Use the CSS above along with any additional styles you need. Then add HTML similar to the example below:

Clickable Thumbnails

WC Show Hide has built-in clickable thumbnail functionality. The following are examples of clickable thumbnail sizes when you link to a large image file:

Thumbnail 100

This is a thumbnail image style at 100 pixels wide. The original image is much wider. If you click on it once, it will increase to 100% of the template width. If you click on it again, it toggles back to 100 pixels wide. All you need is the following HTML:

<img id="example01" src="INSERT IMAGE HERE" alt="INSERT ALT TAG HERE" class="thumbnail100 example01 showme clickme"/>

Thumbnail 150

This is a thumbnail image style at 150 pixels wide. The original image is much wider. If you click on it once, it will increase to 100% of the template width. If you click on it again, it toggles back to 150 pixels wide. All you need is the following HTML:

<img id="example02" src="INSERT IMAGE HERE" alt="INSERT ALT TAG HERE" class="thumbnail150 example02 showme clickme"/>

Thumbnail 200

This is a thumbnail image style at 200 pixels wide. The original image is much wider. If you click on it once, it will increase to 100% of the template width. If you click on it again, it toggles back to 200 pixels wide. All you need is the following HTML:

<img id="example03" src="INSERT IMAGE HERE" alt="INSERT ALT TAG HERE" class="thumbnail200 example03 showme clickme"/>

Thumbnail 250

This is a thumbnail image style at 250 pixels wide. The original image is much wider. If you click on it once, it will increase to 100% of the template width. If you click on it again, it toggles back to 250 pixels wide. All you need is the following HTML:

<img id="example04" src="INSERT IMAGE HERE" alt="INSERT ALT TAG HERE" class="thumbnail250 example04 showme clickme"/>

Thumbnail 300

This is a thumbnail image style at 300 pixels wide. The original image is much wider. If you click on it once, it will increase to 100% of the template width. If you click on it again, it toggles back to 300 pixels wide. All you need is the following HTML:

<img id="example05" src="INSERT IMAGE HERE" alt="INSERT ALT TAG HERE" class="thumbnail300 example05 showme clickme"/>

Thumbnail 350

This is a thumbnail image style at 350 pixels wide. The original image is much wider. If you click on it once, it will increase to 100% of the template width. If you click on it again, it toggles back to 350 pixels wide. All you need is the following HTML:

<img id="example06" src="INSERT IMAGE HERE" alt="INSERT ALT TAG HERE" class="thumbnail350 example06 showme clickme"/>

Interactive Clickable Images

The WC Show Hide allows you to create interactive content from text and images HTML and CSS. The benefits to using WC Show Hide for interactivity are as follows:

• You can chunk content into managable pieces having student click to access information piece by piece.
• You can create content that will work on any device that can access HTML.
• You ensure that that the interactive content is accessible by making the underlying HTML accessible.
• You can update the interactive content yourself with HTML.
• You can use spacial relationships to convey ideas.

The examples below were used in COMM 180 to help visualize the differences between vertical and horizontal integration:

Vertical Integration

A vertically integrated company might try to harm competitors at each level. The government has a variety of rules in place to prevent these kinds of anticompetitive behaviors.

Click on the images below to see an example:

• Production
  For example, Time Warner owns Warner Brothers Studio and HBO.
• Wholesale Distribution
  HBO competes with Showtime. Warner Brothers might give HBO a better deal than Showtime or even refuse to let Showtime have any Warner Brothers movies in order to give HBO an advantage.
• Retail Distribution
  Time Warner Cable systems compete with DirecTV. Time Warner might refuse to let DirecTV carry HBO or CNN so that customers will stick with cable instead of switching to satellite television.

Horizontal Integration

Horizontal integration refers to when a company operates at the same level in multiple markets. For example, Disney owns local television stations in multiple cities. Disney also owns multiple cable networks and even multiple film studios. The same is true for Comcast, which also owns local cable systems all over the country. Horizontal integration allows companies to take advantage of economies of scale and to increase market shares. 

• Owned by Viacom
• Owned by Viacom
• Owned by Viacom

Vertical Layout for Interactive Images

The WC Show Hide allows you to create interactive content from text and images HTML and CSS. You can use spacial relationships to convey ideas. The examples below were used in COMM 180 to help visualize the differences between vertical and horizontal integration:

A vertically integrated company might try to harm competitors at each level. The government has a variety of rules in place to prevent these kinds of anticompetitive behaviors. Click on the images below to see an example:

• Production
  For example, Time Warner owns Warner Brothers Studio and HBO.
• Wholesale Distribution
  HBO competes with Showtime. Warner Brothers might give HBO a better deal than Showtime or even refuse to let Showtime have any Warner Brothers movies in order to give HBO an advantage.
• Retail Distribution
  Time Warner Cable systems compete with DirecTV. Time Warner might refuse to let DirecTV carry HBO or CNN so that customers will stick with cable instead of switching to satellite television.

The example above of clickable images in a vertical layout will require the following:

Create a list.

Add HTML similar to the example below:

Insert a list item for each clickable image.

Inside the ul of the HTML you just added, you will add a list item (li) for each clickable image. Remember to replace the three references of IMAGE-ID-HERE with the unique id you give each image:

Add the CSS.

The CSS creates the interactivity. You can add the CSS by linking to a content.css and adding some CSS. For each clickable image you wish to add, add the code below. Replace IMAGE-ID-HERE with the unique id of the image and images/IMAGE-URL-HERE.jpg with url to that image.

Horizontal Layout for Interactive Images

• Owned by Viacom
• Owned by Viacom
• Owned by Viacom

The example above of clickable images in a horizontal layout will require the following:

Create a list and a details container.

Add HTML similar to the example below:

Insert a list item and a details item for each clickable image.

Inside the ul of the HTML you just added, you will add a list item (li) for each clickable image. Remember to replace the three references of IMAGE-ID-HERE with the unique id you give each image:

Add the CSS.

The CSS creates the interactivity. You can add the CSS by linking to a content.css and adding some CSS. For each clickable image you wish to add, add the code below. Replace IMAGE-ID-HERE with the unique id of the image and images/IMAGE-URL-HERE.jpg with url to that image.

Coming soon!

WC Anchor Nav for Anchor Menus

With the built-in WC Anchor Nav tool, you can let Evolution create anchor menus and back-to-top links automatically for you. All the WC Anchor Nav requires is the following:

The Anchor Menu Placeholder

To create an anchor menu like the one above first place the following code where you would like the anchor menu to appear:

Heading Tags with Unique IDs

To populate the anchor menu, add a unique id to each heading tag:

WC Anchor Nav for Anchor Menu Lists

You can also style your anchor menus in one of the following list styles:

Ordered Lists

To create an anchor menu as an ordered list place the following code where you would like the anchor menu to appear:

Unordered Lists

To create an anchor menu as an unordered list place the following code where you would like the anchor menu to appear:

WC Tabbed Interface for Clickable Tabs

WC Tabbed Interface can be used to create a tabbed interface like the one below. Click on each tab to learn how...

WC Accordion for Accordion Navigation

WC Accordion can be used to create a tabbed interface like the one below. Click on each section of the accordion to learn how...

WC Images Features

WC Images has the following featues built-in to the templates:

Protecting Images with Copyrights

If you have an image with a copyright and you would like to prevent downloading the image on right-click, you can use WC Images.

Adding Dynamic Captions

If you would like to give readers the option to toggle an image caption on and off, you can use WC Images.

Protecting Images with Copyrights

If you have an image with a copyright and you would like to prevent downloading the image on right-click, you can use WC Images.

To create a protected image, do the following:

1. Upload the image in the exact size you intend to use it.
2. Make sure your img has a unique idthe image-protect class, as shown below.
3. Make sure you explicitly set the width and height properties to the exact size of the image, as shown below.

Adding Dynamic Captions

If you would like to give readers the option to toggle an image caption on and off, you can use WC Images.

To create a dynamic caption, do the following:

1. Enclose your image in figure tag, as shown below.
2. Make sure your figure has a unique id and the image-info class as shown below.
3. Enclose your caption in a figurecaption tag just below the image tag, as shown below.

Using WC Glossary

WC Glossary lets you make a reference to term in a glossary page from your lesson content.  For example, I am now mentioning apple, banana, and carrot.  If you hover over them, you can see the definition from my glossary page.  If you click them, you will go directly to the section of my glossary where each one is defined.

To use WC glossary, you need to set up the following:

Your Glossary Page

The simplest way to set up your glossary page is like this:

...but if you would like to create an anchor menu at the top of your glossary you could combine WC Glossary with WC Anchor Nav and do something like this:

Links to the Glossary

All you have to do to reference a term in your glossary is make hyperlink and give it the linktodefinition class:

About the WC Slideplayer

WC Slideplayer is a script that is built-in to the Evolution Large Banner template.

Note: If you like this feature and make a Quickbase Template request, perhaps we can go back and add it to the older rollover templates such as iMBA and WC Rollover as well.

Under the hood...

return to top

WC Slideplayer Advantages

The WC slideplayer allows you to use HTML to place objects on slides directly into the course content.  Because the slideplayer usied the HTML in the course content, he benefits to using the WC slideplayer instead of PowerPoint, Presenter, or Captivate are as follows:

• Content is viewable on any device that can display HTML.  Presenter and Captivate use Flash which means devices that don't support Flash won't be able to play your content.
• Content can be updated directly on lesson pages.  If you need to make an edit, PowerPoint, Presenter, and Captivate require you to have the original source file and republish your content.  Often we lose the orignal source file long after we continue to use the final published version of the content.
• Content can be made accessible more easily.  The text in WC Slideplayer is stored as HTML text.  Other slide applications may store slide text as still images and rely on you to create captions and notes to describle the content.

To learn how to use the WC Slideplayer, continue clicking through the following pages...

return to top

How To Use WC Slideplayer

The WC Slide Player code has three main parts:

• the slide collection,
• the individual slides, and
• the navigation buttons.

return to top

The Slide Collection

The following code creates the collection of slides. Each slide collection should have a unique ID, eg. "slidesA", "figure2", or "example1", so that it can be matched to a set of navigation buttons. It should also have the class "wcslideplayer" so that the WC Slideplayer script will make it function like a slideplayer.

return to top

The Individual Slides

Each individual slide should be placed within the div tags of the slide collection. The following code creates a single slide on the slideplayer. It should also have the class "slide" so that the WC Slideplayer script will make it function like a slideplayer slide.

To see actual examples of the WC Slideplayer and the code that makes them, continue to the following page...

return to top

The Navigation Buttons

The navigation button code can be placed above or below the slide collection code, depending upon whether or not you want the navigation buttons to appear at the top or the bottom of the player itself. The following code creates the set of navigation buttons for WC slideplayer. The navbuttons class tells the slideplayer code that these are slideplayer navigation buttons. A second class, eg. "slidesA", "figure2", or "example1", matches the navigation to the slide collection that it controls.

return to top

Putting It All Togther...

<!-- a slide -->
<div class="slide" id="slide01">

[INSERT SLIDE #1 CONTENT HERE]

</div>
<!-- end slide -->

<!-- a slide -->
<div class="slide" id="slide02">

[INSERT SLIDE #2 CONTENT HERE]

</div>
<!-- end slide -->

return to top

WC Slide Player Options

WC Slide Player has several options out of the box.  You can customize:

• the default grey or the black color schemes,
• the placement of the navigation buttons at the top or bottom of the player, and
• whether or not to include Play All and Pause buttons.

More options may become available as template requests are made and advanced users of CSS may find other ways to customize this player beyond these options.

return to top

Color Schemes

The default style of the slide player is grey, but it can also be black:

return to top

Navigation Button Placement

The navigation can be placed above or below the slideplayer, based on where you place the navbuttons div in relation to the slide collection div.

Navigation Below the Player

return to top

Play All and Pause Buttons

The Slideplayer can be use with or without Play All and Pause buttons. Just add the following two buttons between the prevslide and lastslide button divs:

return to top

WC Slideplayer Advanced Options

For large amounts of slides, you can try the slideplayer with go-to-slide navigation.

Using Charts and Graphs

Newer Evotuion templates will have dynamic charts and graphs built-in to the course. By making a table and applying a few classes, you can have tables that are editable, accessible, and dynamic!

Toggle between Show Table, Show Line Chart, and Show Bar Chart...

Toggle Between Table Types Example

	Television	Movies	Music/Audio	Print	Computer	Video Games
1999	227	18	108	43	27	26
2004	231	25	104	43	62	49
2009	269	25	151	38	89	73

Click to edit the table cell below and watch as the bar chart updates dynamically...

Editable Bar Chart Example

	Television	Newspapers	Radio	Magazines	Internet	Mobile
Time Spent Yesterday (in Minutes)	319.2	26.4	91.2	15.6	156.6	19.2

Basic Setup

The basic setup (using default options) for the built-in charts and graphs is as follows:

Insert the table.

The table tag only requires the following:

• a unique id
• the graphme class

Insert a table caption.

Add the table caption to the caption tag of your table.

Insert the series labels

Add each series label to the thead section as a th.

Insert the data.

Add the data to the tbody section as a td.

Advanced Options

However, the built-in charts and graphs have the following advanced options:

Default Mode

The default mode toggles between table and charts. It does not require a class.

Media Usage: US Children, 8 to 18 Years Old, Average Hours Spent with Each Medium in a Typical Day

	Television	Movies	Music/Audio	Print	Computer	Video Games
1999	227	18	108	43	27	26
2004	231	25	104	43	62	49
2009	269	25	151	38	89	73

Chart-Only Mode

The chartonly class specifies a mode where charts appear on the same page and the table is hidden.

Media Usage: US Children, 8 to 18 Years Old, Average Hours Spent with Each Medium in a Typical Day

	Television	Movies	Music/Audio	Print	Computer	Video Games
1999	227	18	108	43	27	26
2004	231	25	104	43	62	49
2009	269	25	151	38	89	73

Edit Data Mode

The editdata class specifies a editable mode.

Media Usage: US Children, 8 to 18 Years Old, Average Hours Spent with Each Medium in a Typical Day

	Television	Movies	Music/Audio	Print	Computer	Video Games
1999	227	18	108	43	27	26
2004	231	25	104	43	62	49
2009	269	25	151	38	89	73

Chart Types: Bar, Pie and Line

The following classes specify which type of chart you want.

If you want this chart type...	Line Chart	Bar Chart	Pie Chart
add this code to your <tr> tag...	class="linechart"	class="barchart"	class="piechart"

The following chart options are available.

Line Chart

The linechart class specifies a line chart. However, if you do not specify a chart type, you will get the line chart by default.

Media Usage: US Children, 8 to 18 Years Old, Average Hours Spent with Each Medium in a Typical Day

	Television	Movies	Music/Audio	Print	Computer	Video Games
1999	227	18	108	43	27	26
2004	231	25	104	43	62	49
2009	269	25	151	38	89	73

Bar Chart

The barchart class specifies a bar chart.

Media Usage: US Adults, Persons 18+

	Television	Newspapers	Radio	Magazines	Internet	Mobile
Time Spent Yesterday (in Minutes)	319.2	26.4	91.2	15.6	156.6	19.2

Pie Chart

The piechart class specifies a bar chart.

Media Usage

Television	190
Newspapers	3
Radio	10
Magazines	40
Internet	10
Mobile	40

Multiple Charts

If you specify more than one chart type, you can have multiple charts from the same table.

Media Usage: US Children, 8 to 18 Years Old, Average Hours Spent with Each Medium in a Typical Day

	Television	Movies	Music/Audio	Print	Computer	Video Games
1999	227	18	108	43	27	26
2004	231	25	104	43	62	49
2009	269	25	151	38	89	73

Chart Colors

Default Colors

By default, charts and graphs in Large Banner will assume the color scheme of the template.

Table 1.3. Media Usage: US Children, 8 to 18 Years Old, Average Hours Spent with Each Medium in a Typical Day

	Television	Movies	Music/Audio	Print	Computer	Video Games
1999	227	18	108	43	27	26
2004	231	25	104	43	62	49
2009	269	25	151	38	89	73

Override Colors

You can override colors by adding a color class to rows. For example...

Table 1.3. Media Usage: US Children, 8 to 18 Years Old, Average Hours Spent with Each Medium in a Typical Day

	Television	Movies	Music/Audio	Print	Computer	Video Games
1999	227	18	108	43	27	26
2004	231	25	104	43	62	49
2009	269	25	151	38	89	73

Styles for Overriding Default Colors

	Blue	Green	Red
If you want this color...	#0000CC	#00CC00	#CC0000
add this code to your <tr> tag...	class="color0000CC"	class="color00CC00"	class="colorCC0000"

Calculations

The WC Graph Tables also allows you to create a table that performs calculations.

Calculations Example 1

Television	Newspapers	Radio	Magazines	Internet	Mobile	Total
319.2	26.4	91.2	15.6	156.6	19.2

Calculations Example 2

	Television	Newspapers	Radio	Magazines	Internet	Mobile
Value	319.2	26.46	91.21	15.6	156.6	19.2
Round to .10
Round to 10

The basic setup (using default options) for the built-in table calculations is as follows:

Insert the table.

The table tag only requires the following:

• a unique id
• the calculatedata class
• any other functionality you need, eg graphme, linechart barchart, and piechart classes for graphs and/or editadata class to make the data sources editable

Insert the table caption.

Add the table caption to the caption tag of your table.

Insert the series labels.

Add each series label to the thead section as a th.

Insert the cells with data.

Add the data to the tbody section as a td.

If the cell will contain the calculation, it will do the following:

1. Give the cell a unique id, eg. <td id="sumUsage">.
2. Add the calculateme class, eg. <td id="sumUsage" class="calculateme">.
3. Add a class that indicates the type of calculation, eg. <td id="sumUsage" class="calculateme sum">. (See Types of Calculations for a list of calculations that can be performed.)
4. For each cell used in this calculation add that unique id as a class, eg. <td class="sumUsage">.

Types of Calculations

If you want this calculation...	..add this class to the cell that will contain the calculation.
Absolute Value	abs
Arc Cosign	acos
Ceiling	ceil
Cosign	cos
Divide (first by second of cells with this id class, eg. 6 and 3 = 2)	divide
Equals (grabs the value of the first cell with this id class from any table on the page)	equals
Floor (round down to nearest integer)	floor
Highest Value (of all cells with this id class)	max
Mean (of all cells with this id class)	mean
Median (of all cells with this id class)	median
Lowest Value (of all cells with this id class)	min
Multiply (of all cells with this id class)	mult
Power (first to tde second power of cells with this id class, eg. 3 and 3 = 27)	pow
Random Number (between 0 and first cell with this id class)	rand
Get Remainder (of first by second of cells with this id class, eg. 8 and 3 = 2)	rmdr
Round to Nearest Whole Number	rnd
Round to Nearest Thousandth	rnd1000th
Round to Nearest Hundredth	rnd100th
Round to Nearest Tenth	rnd10th
Round to Nearest Ten	rnd10
Round to Nearest Hundred	rnd100
Round to Nearest Thousand	rnd1000
Sine	sin
Square Root	sqrt
Standard Deviation (of all cells with this id class)	stddev
Sum (of all cells with this id class)	sum
Tangent	tan

Full Data Example

	Television	Movies	Music/Audio	Print	Computer	Video Games
1999	227	18	108	43	27	26
2004	231	25	104	43	62	49
2009	269	25	151	38	89	73
Total

Data Subset

Television
Movies
Music/Audio
Print
Computer
Video Games