JSFiddle - React, Tailwind, and code Playground

by angusgrant

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="subjectscontainer panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">
<i class="fa fa-hashtag"></i>
Topics
</h3>
  </div>
  <div class="panel-body keyword-display">
    <ul class="nav nav-pills nav-justified js-keyword-navigation">
      <li class=""><a href="#" data-displaypanel="#subjectcollection_A_C" class="">A-C</a></li>
      <li><a href="#" data-displaypanel="#subjectcollection_D_H" class="">D-H</a></li>
      <li><a href="#" data-displaypanel="#subjectcollection_I_N" class="">I-N</a></li>
      <li class="active"><a href="#" data-displaypanel="#subjectcollection_O_R" class="">O-R</a></li>
      <li><a href="#" data-displaypanel="#subjectcollection_S_Z" class="">S-Z</a></li>
    </ul>
    <ul class="topic-blocks list-unstyled">
      <li class="keyword-panel hidden" id="subjectcollection_A_C" style="display: none;">
        <ul class="col-sm-3 col-xs-6 list-unstyled">
          <li><a href="/pub2web/search?value1=Acoustics&amp;option1=fulltext" title="">Acoustics</a></li>
          <li><a href="/pub2web/search?value1=Agricultural+Economics+%26+Policy&amp;option1=fulltext" title="">Agricultural Economics &amp; Policy</a></li>
          <li><a href="/pub2web/search?value1=Agricultural+Engineering&amp;option1=fulltext" title="">Agricultural Engineering</a></li>
          <li><a href="/pub2web/search?value1=Agriculture&amp;option1=fulltext" title="">Agriculture</a></li>
          <li><a href="/pub2web/search?value1=Agriculture%2C+Dairy+%26+Animal+Science&amp;option1=fulltext" title="">Agriculture, Dairy &amp; Animal Science</a></li>
          <li><a href="/pub2web/search?value1=Agriculture%2C+Multidisciplinary&amp;option1=fulltext" title="">Agriculture, Multidisciplinary</a></li>
          <li><a href="/pub2web/search?value1=Agronomy&amp;option1=fulltext"...

JavaScript

$(document).ready(function() {
   $(".js-keyword-navigation li > a:not(.disabled)").on('click mouseenter', function(e) {
     e.preventDefault();
     var ithis = $(this),
       keywordNav = ithis.closest('.js-keyword-navigation');


     if (!ithis.parent('li').hasClass('active')) {
       keywordNav.find('a').addClass('disabled');
       var prevActivePanel = keywordNav
         .find('.active')
         .removeClass('active')
         .children('a')
         .data('displaypanel'),
         currentActivePanel = ithis.parent('li')
         .addClass('active')
         .end()
         .data('displaypanel');


       $(prevActivePanel).fadeOut("fast", function() {
         var ithis = $(this);
         ithis.addClass('hidden');
         console.log('previous Active Panel faded out:' + prevActivePanel);
         $(currentActivePanel)
           .fadeIn("fast", function() {
             history.pushState(null, null, currentActivePanel);
             $(this).removeClass('hidden');
             console.log('current Active Panel faded in:' + currentActivePanel);
             keywordNav.find('a').removeClass('disabled');

           })

       });

     }

   });
   //check if hash url exists and check an element exists in the DOM that also has the class 'keyword-panel'.
   if (document.location.hash.length > 0 && $(document.location.hash).hasClass('keyword-panel')) {
     // console.log('hash detected:' + document.location.hash);
     $(".js-keyword-navigation li > a[data-displaypanel=" + document.location.hash + "]").trigger('click');
   }

 });