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.