@servicensw/regions

Regions that show/hide. Suitable to be used with drop menus or tab navigation.

Service NSW package documentation and examples
(Login credentials required)

Installation

npm install @servicensw/regions --save-dev

How to use

CSS

• PostCSS workflow: @import '@servicensw/regions';
• Sass/Eyeglass: @import 'servicensw-regions';
• Native CSS: @import url('dist/regions.css');
• Link tag: <link href="dist/regions.css" rel="stylesheet" type="text/css">

Vanilla JS

The recommended usage is of ES modules, to take advantage of code-splitting.

import RegionToggle from "@servicensw/regions"

const regionToggles = document.querySelectorAll(".regions:not(.is-excluded)")
regionToggles.forEach(element => {
  new RegionToggle(element)
})

Legacy usage;

• IIFE: <script src="dist/region-toggle.js" type="text/javascript"></script> (initialized for all .regions elements)
• Common JS: const RegionToggle = require("@servicensw/regions") (initialize yourself)

HTML

<ul>
  <li><a aria-controls="showHideRegion1">Region 1</a></li>
  <li><a aria-controls="showHideRegion2">Region 2</a></li>
  <li><a aria-controls="showHideRegion3">Region 3</a></li>
</ul>
<div class="regions">
  <div role="region" id="showHideRegion1" aria-label="Region 1">
    <p>Region 1</p>
  </div>
  <div role="region" id="showHideRegion2" aria-label="Region 2">
    <p>Region 2</p>
  </div>
  <div role="region" id="showHideRegion3" aria-label="Region 3">
    <p>Region 3</p>
  </div>
</div>

Developer notes

Each region must have an id and role="region" attribute. The toggle for that region must have an aria-controls atttribute with the regions id as its value. Change log