Template Extras

We have added some sweet little extras to the Classic Western Template. Most of these employ jquery (a javascript library) for the effects, which will work on any browsers on any devices (as long as javascript is not disabled. If javascript is disabled the effect will not be seen but the content will be available).

Boxes | Accordion Text Areas | Expanding Sub Menus
Photo Gallery | Slideshow | Filetype Indicators

Accordion Text Areas

Accordions are sections that can be opened and closed by the viewer. They're very useful for FAQ pages or pages with lots of sections and text. To make these work you need a section header like this:

<h3 class="slider">Section 1</h3>

and then surrounding the "body" of the message that will be hidden when the accordion is closed a div like this:

<div class="drawer"><p>Body of Section 1 here</p></div>

Note that the accordion starts with all drawers closed and then clicking on a drawer opens that one and closes any that are open.

Expanding Sub Menus

The navigation menu is found in /includes/nav.html . Note that this tag in your unordered lists:

<ul title="navigation">

causes your menu to expand and collapse on those items that have another unordered list inside them. If you do not wish the menu to expand and contract, remove the title part of the ul tag so it looks like this:


Problem-solving sub-menus

If your accordion menu is not working, please note that your entire sub-menu has to be inside the parent <li> list tag (see correct placement of </li> bolded below):

 <li><a  href="aquatics.shtml">Aquatics</a>
               <li><a href="swimlessons.shtml">Youth Swim  Lessons</a></li>
               <li><a href="adultswimlessons.shtml">Adult Swim  Lessons</a></li>
  </li> <!-- RIGHT -->

Make sure the list is not closed, then followed by the sublist as this is (see INCORRECT placement of </li> tag bold below):

 <li><a  href="aquatics.shtml">Aquatics</a> </li> <!-- WRONG -->
               <li><a href="swimlessons.shtml">Youth Swim  Lessons</a></li>
               <li><a href="adultswimlessons.shtml">Adult Swim  Lessons</a></li>


Four styles of shaded boxed areas are available in the Western Template:

  • class="box-left-quote"
  • class="box-right-quote"
  • class="box-left-details"
  • class="box-right-details"

Note that by adding the class "rounded" to any of these the shading will be rounded. The result would be

class="box-left-quote rounded"


You can easily modify it for your own purposes by adding and removing pictures from the gallery subfolder and updating the unordered-list in photos.html accordingly.

The Gallery must be coded like this:

<ul class="gallery">
  <li><img src="gallery/beachchairs.JPG" alt="chairs" title="These are chairs." /></li>
  <li><img src="gallery/beachpebbles.JPG" alt="pebbles" title="Not chairs." /></li>
  <li><img src="gallery/greytree.JPG" alt="tree" title="Not chairs." /></li>
  <li><img src="gallery/waterdrops.JPG" alt="water" title="Not chairs." /> </li>

The title attribute of the <img> tags provides the text which will be displayed underneath the image.

Should a visitor attempt to view the gallery with javascript disabled, they will simply be presented with all of the pictures at full-size listed vertically down the screen.


A slideshow is similar to a photo gallery except that only one file is shown at a time and the images shift automatically rather than by user clicks. To create the slideshow:

  1. Resize the images in photoshop. For best results the images should be 200 px in height - the width doesn't matter except that anything more than 700px won't fit in the template.
  2. Store the resized images in the slideshow folder provided in the template (or create one yourself)
  3. Create the page: select File, New, Page From Template, and then select the slideshow template.
  4. Find the first image which is shown with a dot next to it in Dreamweaver (it will not show this way on the web). Delete the image and drag one of the images from the slideshow folder into the space next to the dot. Repeat this for all the images you wish to cycle through. If you need more images, simply place your cursor next to one of the images, press enter, and drag an image to the new dot.


if you wish to add a slideshow to any page, follow these instructions:

Code added In the header: Ends up looking like this (look for the non-bolded lines in your code, then add the bold lines between them):

        <!-- InstanceBeginEditable name="head" -->
          <script type="text/javascript" 
        <!-- InstanceEndEditable —>

Slideshow in body of page: (add these lines in the content area you want the slideshow to show up and then correct for your filenames and image sizes, adding as many images as you like):

        <ul class="slideshow">
           <li><img src="slideshow/filename.jpg" width="xxx" height="xxx"  /></li>
           <li><img src="slideshow/filename.jpg" width="xxx" height="xxx" /></li>

Javascript call at bottom of page (look for the non-bolded lines in your code, then add the bold lines between them) :

    <!-- InstanceBeginEditable name="Scripts" -->
    <!-- Put Scripts and Google Analytics Codes here -->
      <script type="text/javascript">
         $(document).ready( function(){
           <!--For slideshow-->
    <!-- InstanceEndEditable -->

Automatic File-type Indication

If a webpage in the new template contains a link to a non-html page, a special icon is shown indicating what kind of document is being accessed. The types of documents that are automatically handled include:

  • PDFs (.pdf)
  • Word Documents (.doc or .docx)
  • Excel files (.xls)
  • Email (mailto:)

Esign forms can also be indicated by adding the class=esign to the container.

Note that all of the above also require the appropriate script links in the header of the html code. These come standard in the template, but if you are doing your own and are at Western contact webhelp@wwu.edu for those instructions.