Slide-out tab

Overview

Project Lead: Stephane Berube (@berubs)

Purpose

This feature adds a mechanism for providing additional content without wasting valuable space on the page.

Use When

The slide out tab has been used predominantly on Government of Canada websites to display a Table of Contents of the content on the page.

Do Not Use When

Do not use with important content that could be missed by the user.

Implementation

In your content, add a container with the wet-boew-slideout class:

<div class="wet-boew-slideout">
    <h2>Table of Contents</h2>
    <ul id="list">
        <li><a href="#">Context</a></li>
        <li><a href="#">Technology Roadmapping — The Process</a></li>
        <li><a href="#">Industry Structure and Overview</a></li>
        <li><a href="http://alpha.gcwwwtemplates.tbs-sct.ircan.gc.ca/theme-clf2-nsi2/slideout-eng.html">Current page</a></li>
        <li><a href="#">Partnerships</a></li>
        <li><a href="#">E-commerce</a></li>
        <li><a href="#">Marketing</a></li>
        <li><a href="#">Productivity</a></li>
    </ul>
</div>

Working example

Parameters

To change the images used in the tab, you can use the following parameters in the data-wet-boew attribute of the above container.

txtShow

Contains the text shown when the slide out panel is closed.

txtHide

Contains the text shown when the slide out panel is opened.

Example

<div class="wet-boew-slideout" data-wet-boew='{"txtShow": "Show table of contents", "txtHide": "Hide table of contents"}'>
    <h2>Table of Contents</h2>
    <ul id="list">
        <li><a href="#">Context</a></li>
        <li><a href="#">Technology Roadmapping — The Process</a></li>
        <li><a href="#">Industry Structure and Overview</a></li>
        <li><a href="http://alpha.gcwwwtemplates.tbs-sct.ircan.gc.ca/theme-clf2-nsi2/slideout-eng.html">Current page</a></li>
        <li><a href="#">Partnerships</a></li>
        <li><a href="#">E-commerce</a></li>
        <li><a href="#">Marketing</a></li>
        <li><a href="#">Productivity</a></li>
    </ul>
</div>

Migration from 3.0 to 3.1

With version 3.1, the slideout tab now uses text instead of images.

The parameters to change the default tab content have been changed from "imgShow" and "imgHide" to "txtShow" and "txtHide" respectively.

For example, this "wet-boew-slideout" container from 3.0:

<div class="wet-boew-slideout" data-wet-boew='{"imgShow": {"src": "images/show-afficher.png", "height": 62, "width": 17, "alt": "Show the table of contents"}, "imgHide": {"src": "images/hide-cacher.png", "height": 62, "width": 17, "alt": "Hide the table of contents"} }'>

Should be replaced with the following in v3.1:

<div class="wet-boew-slideout" data-wet-boew='{"txtShow": "Show table of contents", "txtHide": "Hide table of contents"}'>

Examples

Development

The code for the slide out tab is located in several places within the source folder of WET:

Known Issues

There are no known technical issues. If you find one, please contribute by filing an issue.

Usability testing on this feature has not yet been conducted.

Version History