JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<div class="container">

  <!--Removed .eighty-percent because it
hindered layout in demo only, 
adding it or removing it shouln't
affect functionality in your production version.-->

  <div class="categories left">
    <ul>
      <li>
        <a href="#" class="link" id="main-category" rel="main1">main-category-one</a>

        <!--Added a class (i.e. subList) 
          in order to style it easier, 
          see CSS for why styling was needed -->

        <ul class="subList">

          <!--Changed each <a>nchor id as a 
          unique one. You should never have more
          than one of the same id on a page.-->

          <li><a href="#" class="link" id="sub-category-one" rel="main-sub1">sub-cat-one</a></li>
          <li><a href="#" class="link" id="sub-category-two" rel="main-sub2">sub-cat-two</a></li>
          <li><a href="#" class="link" id="sub-category-three" rel="main-sub3">sub-cat-three</a></li>
          <li><a href="#" class="link" id="sub-category-four" rel="main-sub4">sub-cat-four</a></li>

        </ul>
      </li>
    </ul>


  </div>

  <div class="products right">

    <div class="products-list" id="main1">

      <h1>main category one</h1>

    </div>

    <div class="products-list sub" id="main-sub1">

      <h2>sub category one</h2>

    </div>

    <div class="products-list sub" id="main-sub2">

      <h2>sub category two</h2>

    </div>

    <div class="products-list sub" id="main-sub3">

      <h2>sub category three</h2>

    </div>

    <div class="products-list sub" id="main-sub4">

      <h2>sub category four</h2>

    </div>




  </div>


</div>

CSS

.container {
  width: 100%;
  height: auto;
}

/* 
Added to prevent the right
column from wrapping under
the left column.
*/
.subList {
  height: 100vw;
  display: none;
}

.categories {
  width: 50%;
  float: left;
}

.products-list {
  width: 50%;
  float: right;
  display: none;
}

JavaScript

$(function() {

  $('.link').click(function(event) {
    /* 
    Added to prevent <a>nchor links 
    from jumping. Note the `event` 
    parameter above as well.
    */
    event.preventDefault();

    $(this).next('ul').toggle();
    var id = $(this).attr("rel");
    /*
    Added a class (i.e. `sub`), to 
    each #main-sub* so all of them will
    be targeted to hide by the .hide()
    method.
    */
    $('.sub').hide();
    $('#' + id).show();

  });

});