jquery Cookie set and get expanded status of divs

jquery Cookie set and get expanded status of divs

by Avinashullal

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
<div id="block_1" class="block ">
    	<h3 class="header">
    	<span>click me</span>
    </h3>

    <div class="outer" style="display: block;">
        <div class="inner">test content</div>
    </div>
</div>
<div id="block_2" class="block ">
    	<h3 class="header">
    	<span>click me</span>
    </h3>

    <div class="outer" style="display: block;">
        <div class="inner">test content</div>
    </div>
</div>
<div id="block_3" class="block ">
    	<h3 class="header">
    	<span>click me</span>
    </h3>

    <div class="outer" style="display: block;">
        <div class="inner">test content</div>
    </div>
</div>

CSS

.block {
    margin:10px;
    background:#eee;
    border:1px solid #ddd;
    padding:5px;
}
.header {
    background:tomato;
    color:#fff;
    margin:0;
    padding:5px 10px;
}

JavaScript

$(document).ready(function () {
    $('.block').each(function () {
        var block = $(this).attr('id');
        if ($.cookie(block) == 'hide') {
            $(this).find('.outer').hide();
        }
    });
});
$('.block').click(function () {
    if ($(this).find('.outer').css('display') == 'block') {
        $(this).find('.outer').slideUp('normal');
        $.cookie($(this).attr('id'), 'hide');

    } else {
        $(this).find('.outer').slideDown('slow');
        var tab_cookie = $.cookie($(this).attr('id'));

        if (tab_cookie == 'hide') {
            $.cookie($(this).attr('id'), 'show');
        }
    }
});

// saving cookie value
// $.cookie('name', 1);

// if ($.cookie('name') == 1) {  //calling cookie value

// $.cookie("name", null);   //clearing cookie