@servicensw/regions

Region toggle component

Usage no npm install needed!

<script type="module">
  import servicenswRegions from 'https://cdn.skypack.dev/@servicensw/regions';
</script>

README

@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

  • Vanilla JS / ES6: import '@servicensw/regions';
  • Script tag: <script src="dist/region-toggle.js" type="text/javascript"></script>

Vanilla JS is called on DOMContentLoaded for all .regions elements.

Alternatively, initialise it manually for a specific HTML element:

const regionElement = document.querySelector('.region');
const regions = new SNSW.RegionToggle(regionElement);

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.