JSFiddle - React, Tailwind, and code Playground

by Dipak1991

HTML

<span class="link"><a href="#A">A</a></span>
<span class="link"><a href="#B">B</a></span> 

<div class="test-listing-container">
    <ul class="test-full-list">
      <ul class="test-category-list">
        <a name="A"></a>
        <div class="anchor-header">- A -</div>
           <li id="test-list-A">
           <a href="some link" class="main" title="some title">Some Link 1 - A</a>
           <a href="some link" class="main" title="some title">Some Link 1 - A</a>
           </li>
      </ul>
      <ul class="test-category-list">
        <a name="B"></a>
        <div class="anchor-header">- B -</div>
           <li id="test-list-B">
           <a href="some link" class="main" title="some title">Some Link 1 - B</a>
           <a href="some link" class="main" title="some title">Some Link 1 - B</a>
           </li>
      </ul>
    </ul>
</div>

JavaScript

$.noConflict();

jQuery(document).ready(function(){
    jQuery('ul.test-category-list').hide();
    jQuery('ul.test-category-list').first().show(); //show the first one by default

    jQuery(document).on('click', '.link a', function (evt) {
        var $a = jQuery(evt.currentTarget),
            name = $a.attr('href').substr(1),
            $a2 = jQuery('.test-listing-container').find('a[name="' + name + '"]'),
            $ul = $a2.parents('ul.test-category-list').first();

        jQuery('ul.test-category-list').hide(); // hide all 
        $ul.show(); // show the relevant one
    });
});