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>

Examples

Development

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

js/workers/slideout.js - contains the JavaScript code for the slide out tab
js/sass/includes/_slideout.scss - contains the CSS for the slide out tab
js/sass/includes/_slideout-ie.scss - contains the old specific CSS for the slide out tab

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.

Search