Hide and Show toggling

Hide and Show toggling. Display 1 list at a time.

by Nirvanachain

HTML

<ul id="accordion" class="collapsible">
    <li class="main"><span>+</span> <b>Oil and Vinegar</b>
            <ul>
                <li>Extra Virgin Olive Oil</li>
                <li>Nut and Seed Oils</li>    
                <li>Balsamic Vinegar</li>
                <li>Wine Vinegar</li>
            </ul>
      </li>         
    <li class="main"><span>+</span> <b>Coffee and Tea</b>
            <ul>
                <li>Mariage Frères Tea</li>    
                <li>Peaberry&#039;s Coffee and Tea</li>
            </ul>
      </li>    
</ul>

CSS

ul {list-style:none;}

.main > ul {display:none;}

JavaScript

function show(i) {
    $('.main > ul:eq('+i+')').css(
        {
            display:'block'
        }
    ).animate(
        {
            opacity: 1
        },
        100,
        function() {
            $(this).parent().find('span').text('-');   
        }
    );
}

function hide(i) {
    $('.main > ul:eq('+i+')').css(
        {
            display:'none'
        }
    ).animate(
        {
            opacity: 1
        },
        100,
        function() {
            $(this).parent().find('span').text('+');   
        }
    );
}

function listControl(i, doWhat) {
    $('.main').each(function(index, elem) {
       hide(index); 
    });
    if (doWhat === 'showList') {
	    show(i);
	}
}

function click() {
    $('.main').on('click', function() {
        //prevent additional clicks while animation is running
        if($('#accordion ul').is(':animated')) return;
        if ( $(this).find('ul').css('display') === 'none' ) {
            listControl( $(this).index(), 'showList' );
        }
        else {
            listControl( $(this).index() );
        }
    });
}

$(document).ready(function() {
    click(); 
});