JSFiddle - React, Tailwind, and code Playground

by dipeshbeckham

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="select-user-type-js select-user-type_customer active">Customer</a>
<a href="" id="sellerID" class="select-user-type-js select-user-type_performer">Seller</a>

<ul id="buyer">
  <li><a href="#">Menu for buyer #1</a></li>
  <li><a href="#">Menu for buyer #2</a></li>
  <li><a href="#">Menu for buyer #3</a></li>
</ul>

<ul id="seller">
  <li><a href="#">Menu for seller #1</a></li>
  <li><a href="#">Menu for seller #2</a></li>
  <li><a href="#">Menu for seller #3</a></li>
</ul>

CSS

#buyer, #seller {
  display: none; 
}

.active{
    color:red;
    background-color:blue;
}

JavaScript

$(document).on('mouseenter', '.select-user-type-js', function()
{
var $this = $(this);
  $('.select-user-type-js.active').add($this).toggleClass('active');
  if ($this.hasClass('select-user-type_customer')) {
    $('#buyer').show();
    $('#seller').hide();
  } else {
    $('#buyer').hide();
    $('#seller').show();
  }
});