TabExample.jpg

Use the code below to create the example shown above. You can change any information in CAPS to reflect your content. Information presented in html comments <!--Information--> will not show in page view and is provided as an extra tip or to clarify the code. For more information about using codes, review the Canvas Style Guide.

<!-- Code for two tab example -->

<div class="enhanceable_content tabs">

<ul>

<li><a href="#fragment-1">TAB 1 TITLE</a></li>

<li><a href="#fragment-2">TAB 2 TITLE</a></li>

 

</ul>

<div id="fragment-1">

<h2>TITLE IN CONTENT AREA OF TAB 1</h2>

<p>CONTENT FOR TAB 1</p>

</div>

<div id="fragment-2">

<h2>TITLE IN CONTENT AREA OF TAB 2</h2>

<p>CONTENT FOR TAB 2</p>

</div>

<!-- Add additional tab content areas by copying a whole  fragment section and pasting it here. Don’t forget to change the fragment number to match your reference above! -->

</div>

<!-- Create a blue line so readers don’t go to the next page without reading all of the tabs -->

<div style="background: #30759b;">

<!-- You can change the color of the bar by changing the hex color code - find color codes at https://color.adobe.com/ -->

<p style="text-align: right; color: #ffffff; padding: 10px 10px 10px 10px;">Before you select "Next" please read through the two sections above</p>

<!-- You can adjust the text in HTML view or in the RCE for the number of sections (tabs) -->

</div>

Use the code below to create the example shown above. You can change any information in CAPS to reflect your content. Information presented in html comments <!--Information--> will not show in page view and is provided as an extra tip or to clarify the code. For more information about using codes, review the Canvas Style Guide.

<!-- Code for two accordion example -->

<div class="enhanceable_content accordion">

<h3><a href="#">TAB 1 TITLE</a></h3>

<div style="padding: 0px 10px 0px 10px;">

<p>CONTENT FOR ACCORDION 1</p>

</div>

<h3><a href="#">TAB 2 TITLE</a></h3>

<div style="padding: 0px 10px 0px 10px;">

<p>CONTENT FOR ACCORDION 2</p>

</div>

<!-- Add additional accordion layers by copying a whole chunk of code (from <h3> to </div>) and pasting it here. Don’t forget to change the heading level <h3> on your accordion so that it is appropriate for your page! -->

</div>

Use the code below to create the example shown above. You can change any information in CAPS to reflect your content. Information presented in html comments <!--Information--> will not show in page view and is provided as an extra tip or to clarify the code. For more information about using codes, review the Canvas Community.

<!---- Grab the code below to make a pop-up window. You can change every number 1 to a keyword or number ---->

<h2>Pop-up Window Below</h2>

<p><a id="1" title="Pop-up" href="#1">POP-UP WINDOW 1</a></p>

<div id="1" class="enhanceable_content dialog">

CONTENT FOR POP-UP WINDOW 1

</div>

<!---- Grab the code below to make a second pop-up window. You can change every number 2 to a keyword or number ---->

<h2>Pop-up Window Below</h2>

<p><a id="2" title="Pop up " href="#2">POP-UP WINDOW 2 TITLE</a></p>

<div id="2" class="enhanceable_content dialog">CONTENT FOR POP-UP WINDOW 2</div>