SO - 18942835
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="http://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 content1
</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 content2
</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 content3
</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');
}
}
});