JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://stilbuero.de/jquery/cookie/jquery.cookie.js"></script>
<div id="geysers">
<h3 class="closeit">Geysers</h3>
<div class="g_menu"><a href="desc.php?id=7" rel="7">Averiy</a><br><a href="desc.php?id=8" rel="8">Bastion</a><br><a href="desc.php?id=6" rel="6">Crack</a><br><a href="desc.php?id=10" rel="10">Double</a><br><a href="desc.php?id=13" rel="13">Fountain</a><br><a href="desc.php?id=1" rel="1">Geysers</a><br><a href="desc.php?id=3" rel="3">Giant</a><br><a href="desc.php?id=2" rel="2">Greater</a><br><a href="desc.php?id=9" rel="9">Grotto</a><br><a href="desc.php?id=11" rel="11">Inconsistent</a><br><a href="desc.php?id=12" rel="12">New Fountain</a><br><a href="desc.php?id=4" rel="4">Pearl</a><br>
</div>
<div id="other">
<h3 class="openit">Other</h3><div class="g_menu"><a href="desc.php?id=5" rel="5">Firstborn</a><br><a href="desc.php?id=15" rel="15">Malachite Grotto</a><br><a href="desc.php?id=14" rel="14">Stained glass</a><br>
</div>
JavaScript
$('h3').next('.g_menu').filter(function() {
return $.cookie("expanded-" + $(this).parent("[id]").attr("id"));
}).hide();
$('h3').click(function(){
$(this).toggleClass('closeit').toggleClass('openit');
var menu = $(this).next('.g_menu');
if(menu.is(':visible')) {
menu.fadeOut(50);
$.cookie("expanded-" + $(this).parent().attr("id"), true);
} else {
menu.fadeIn(980);
$.cookie("expanded-" + $(this).parent().attr("id"), null);
}
});