$(function()
{
    trigger();
    navigation();
});

function trigger()
{
    doAccordian();
}

function navigation()
{
    $("ul.nav  li > ul").hide();
    $("ul.nav  li").mouseover( function() {
        $(this).find("ul").show();
    });
    $("ul.nav  li").mouseout( function() {
        $(this).find("ul").hide();
    });
    
}

function doAccordian()
{
    // hide them all and inactivate them
    $(".accordian").find("div").hide();
    $(".accordian").find("li").removeClass("active");
    // show first li myst ba class="active"
    $(".accordian").find("div:first").show();
    $(".accordian").find("li:first").addClass("active");
    // now set the action for each li
    $(".accordian").find("li").each(function(){
        // unbind any events
        $(this).unbind();
        $(this).mouseup(function() {
            $(".accordian").find("div").hide();
            $(".accordian").find("li").removeClass("active");
            $(this).next().fadeIn();
            $(this).addClass("active");
        });
    });
    
}