Accordion menu

expand/hide content accessibly

by cfarm

HTML

<p id="contract-menu-options"><a href="#" id="contractPrograms">Contract All</a> | <a href="#" id="expandPrograms">Expand All</a> <span id="legend">Legend: <span class="diet_nuts">Nuts</span> <span class="diet_shellfish">Shellfish</span> <span class="diet_vegan">Vegan</span> <span class="diet_vegetarian">Vegetarian</span></span></p> 



<div id="nutritionalInfo">
    
    <h2 id="header_0">Breads</h2> 
    <div class="nutriCol"> 
        <ul class="list_h2"> 
        </ul> 
        <h3 id="header_1">Bagels</h3> 
        <ul class="list_h3"> 
            <li class="searchus" id="item_2"><a href="nutrition-pdfs-2011/breads/bagels/bagel_blueberry__veg.pdf" title="Bagel Blueberry" class="nutripdf">Bagel Blueberry</a><span class="diet_vegetarian">Vegetarian</span></li> 
            <li class="searchus" id="item_3"><a href="nutrition-pdfs-2011/breads/bagels/bagel_chocolate_chip__veg.pdf" title="Bagel Chocolate Chip" class="nutripdf">Bagel Chocolate Chip</a><span class="diet_vegetarian">Vegetarian</span></li> 
            <li class="searchus" id="item_4"><a href="nutrition-pdfs-2011/breads/bagels/bagel_cinnamon_raisin__veg.pdf" title="Bagel Cinnamon Raisin" class="nutripdf">Bagel Cinnamon Raisin</a><span class="diet_vegetarian">Vegetarian</span></li> 
            <li class="searchus" id="item_5"><a href="nutrition-pdfs-2011/breads/bagels/bagel_egg__veg.pdf" title="Bagel Egg" class="nutripdf">Bagel Egg</a><span class="diet_vegetarian">Vegetarian</span></li> 
            <li class="searchus" id="item_6"><a href="nutrition-pdfs-2011/breads/bagels/bagel_everything__veg.pdf" title="Bagel Everything" class="nutripdf">Bagel Everything</a><span class="diet_vegetarian">Vegetarian</span></li> 
            <li class="searchus" id="item_7"><a href="nutrition-pdfs-2011/breads/bagels/bagel_garlic__veg.pdf" title="Bagel Garlic" class="nutripdf">Bagel Garlic</a><span class="diet_vegetarian">Vegetarian</span></li> 
            <li class="searchus" id="item_8"><a...

CSS

.accessibly-hidden {
    position: absolute; left: -999em;
}
#nutritionalInfo h2 {display:block;clear:both;background:yellow;font-size:110%;}
#nutritionalInfo h2:before {content:"+ ";}
#nutritionalInfo h2:hover, #nutritionalInfo h3:hover {cursor:pointer;cursor:hand;}

.visible {font-weight:bold;}

JavaScript

var $menuHeading = $('#nutritionalInfo h2'),
        $nutriCol = $('.nutriCol');
        $list_h3 = $('.list_h3');
        $h3 = $('#nutritionalInfo h3');

    $($nutriCol,$list_h3).addClass('accessibly-hidden'); 

    $menuHeading.click(function () {
        if($(this).is('.visible')){
           $(this).removeClass('visible');
           $(this).next().removeClass('visible').addClass('accessibly-hidden');
    } else {
           $(this).removeClass('accessibly-hidden').addClass('visible');
           $(this).next().removeClass('accessibly-hidden');
           $list_h3.addClass('accessibly-hidden');
}
        });   

$h3.click(function() {
    if(($this).is('.visible')){
        $(this).removeClass('visible');
        $(this).next().removeClass('visible').addClass('accessibly-hidden');
    } else {
        $(this).removeClass('accessibly-hidden').addClass('visible');
        $(this).next().removeClass('accessibly-hidden').addClass('visible');
    }
});

    $("#contractPrograms").click(function() {
            $nutriCol.addClass('accessibly-hidden');
        return false;
    });

    $("#expandPrograms").click(function() {
        $('#nutritionalInfo').children().removeClass('accessibly-hidden');
        return false;
    });