JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.axiomfiles.com/Files/258012/jquery.cookie.js"></script>
Cookie: <span id="cookie"></span><br>

<div id="container">

<div id="sidebar">
 <h2 class="letter_head"><a href="#" class="ABC1">ABC1</a></h2>
 <ul class="letter_index">
  <li>Abc1</li>
  <li>Bcd1</li>
 </ul>

 <h2 class="letter_head"><a href="#" class="ABC2">ABC2</a></h2>
 <ul class="letter_index">
  <li>Abc2</li>
  <li>Bcd2</li>
 </ul>

 <h2 class="letter_head"><a href="#" class="ABC3">ABC3</a></h2>
 <ul class="letter_index">
  <li>Abc3</li>
  <li>Bcd3</li>
 </ul>

</div>

</div>

CSS

h2 { background: #08f; font-weight: bold; padding: 3px; }
h2 a { color: #fff; text-decoration: none; }

JavaScript

function initMenus() {
 var sidebar = $('#sidebar');
 sidebar.find('ul.letter_index').hide();
 var cookie = $.cookie( sidebar.attr('id') );

 $('#cookie').html(cookie); // remove this line, it is for demo purposes only

 if (cookie === null || String(cookie).length < 1) {
  sidebar.find('.letter_index:first').show();
 } else {
  sidebar.find(('h2 > a.' + cookie)).parent().next().show();
 }

 sidebar.find('h2.letter_head').click(function(){
  var checkElement = $(this).next();
  if ((checkElement.is('.letter_index')) && (!checkElement.is(':visible'))) {
   sidebar.find('.letter_index:visible').slideUp('normal');
   var headClassName = $(this).find('a').attr('class').trim();
   if (headClassName.length > 0) {
    $.cookie( sidebar.attr('id'), headClassName );

    $('#cookie').html(headClassName); // remove this line, it is for demo purposes only
    
   }
   checkElement.slideDown('normal');
   return false;
  }
 });
}
$(document).ready(function() {initMenus();});