Appendix JS_G_A8

Requirement: Blocks of repeating content can be bypassed.

Details: Use an expandable/collapsible menu to bypass blocks of content.

<div id="demo">
    <h3>Weather and Warnings in your area</h3>
    <ol class="menu">
        <li><a href="...">New South Wales</a></li>
        <li><a href="...">Victoria</a></li>
        <li><a href="...">Queensland</a></li>
        <li><a href="...">Western Australia</a></li>
        <li><a href="...">South Australia</a></li>
        <li><a href="...">Tasmania</a></li>
        <li><a href="...">Australian Capital Territory</a></li>
        <li><a href="...">Northern Territory</a></li>
    </ol>
</div>

var container = document.getElementById('demo');
var heading = container.getElementsByTagName('h3').item(0);
var list = container.getElementsByTagName('ol').item(0);
 
var button = document.createElement('button');
button.appendChild(document.createTextNode('-'));
heading.insertBefore(button, heading.firstChild);
 
button.addEventListener('click', function()
{
    if(list.style.display == 'none')
    {
        list.style.display = 'block';
        button.firstChild.nodeValue = '-';
    }
    else
    {
        list.style.display = 'none';
        button.firstChild.nodeValue = '+';
    }
}, false);