JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/js-cookie/js-cookie/master/src/js.cookie.js"></script>
<div id="elem1" class="section">
<div class="header">
My Box
</div>
<div class="content">
Content..
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
<div id="elem2" class="section">
<div class="header">
My Box
</div>
<div class="content">
Content..
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
CSS
.section {
border: 1px solid #aaa;
border-radius: 3px;
}
.section .header {
padding: 5px 10px;
background: #dedede;
cursor: pointer;
}
.section .content {
padding: 10px;
}
JavaScript
var hideSections = Cookies.getJSON('hideSections');
if (hideSections)
$(hideSections.join(', ')).find('.content').slideUp();
$('.section .header').click(function() {
var elem = $(this).parent().find('.content');
alert(elem)
elem.slideToggle(function() {
var id = '#'+$(this).parent().attr('id');
var elems = Cookies.getJSON('hideSections') || [];
if ($.inArray(id, elems) === -1 && elem.is(':hidden'))
elems.push(id);
else if (elem.is(':visible'))
elems.splice(elems.indexOf(id), 1);
Cookies.set('hideSections', elems, {expires: 7});
});
});