Simil-accordion with cookies

by Farzad Cyrus

HTML

<script src="http://cachedcommons.org/cache/jquery-cookie/0.0.0/javascripts/jquery-cookie-min.js"></script>
<div id="cont">
    
<h3 class="trigger" id="frst">Section 1</h3> 
    <div class="toggle">
        <p>Blah blah blah Blah blah blah Blah blah blah Blah blah blah</p>
    </div>
    
<h3 class="trigger" id="scnd">Section 2</h3> 
    <div class="toggle">
        <p>Blah blah blah Blah blah blah Blah blah blah Blah blah blah</p>
    </div>
    
<h3 class="trigger" id="thrd">Section 3</h3> 
    <div class="toggle">
        <p>Blah blah blah Blah blah blah Blah blah blah Blah blah blah</p>
    </div>
    
<h3 class="trigger" id="frth">Section 4</h3> 
    <div class="toggle">
        <p>Blah blah blah Blah blah blah Blah blah blah Blah blah blah</p>
    </div>
    
<h3 class="trigger" id="ffth">Section 5</h3> 
    <div class="toggle">
        <p>Blah blah blah Blah blah blah Blah blah blah Blah blah blah</p>
    </div>
    
<h3 class="trigger" id="sxth">Section 6</h3> 
    <div class="toggle">
        <p>Blah blah blah Blah blah blah Blah blah blah Blah blah blah</p>
    </div>
</div>

CSS

.toggle {
    width:100px;
    color:grey;
}
.trigger {
    cursor:pointer;
}

JavaScript

$(".toggle").hide(); //Hide .toggles

$(window).load(function () {
    $('.toggle').not(':hidden')
        .prev('.trigger').trigger("click"); //Simulate click on visible .toggle(s) h3(s)
});

$('.trigger').each(function () { //For each .trigger
    var theActive = $.cookie($(this).attr('id')); //Retrieve the cookies
    if (theActive) { //Verify if cookies exist
        $('#' + theActive).next(".toggle").slideDown(700); //And slide down the respective .toggle
    }

});

$(".trigger").toggle( //Toggle permits alternate clicks
function () {
    $(this).next('.toggle').slideDown('slow'); //On odd clicks, .toggle slides down...
    $.cookie($(this).attr('id'), $(this).attr('id')); //...and the cookie is set by its ids.
}, function () {
    $(this).next('.toggle').slideUp('slow'); //On even clicks, .toggle slides up...
    $.cookie($(this).attr('id'), null); //...and the cookie is deleted.
});