JSFiddle - React, Tailwind, and code Playground

by Ian Sanders

HTML

<div class="lists">
    <div class="dropMenu">
      <div class="listName">
        <p class="authors">Contributors</p>
        <i class="fas fa-caret-down"></i>
      </div>
      <ul>
        <li><a href="#" class="author">name01</a></li>
        <li><a href="#" class="author">name02</a></li>
        <li><a href="#" class="author">name03</a></li>
        <li><a href="#" class="author">name04</a></li>
        <li><a href="#" class="author">name05</a></li>
        <li><a href="#" class="author">name06</a></li>
        <li><a href="#" class="author">name07</a></li>
        <li><a href="#" class="author">name08</a></li>
        <li><a href="#" class="author">name09</a></li>
        <li><a href="#" class="author">name10</a></li>
      </ul>
    </div>
    <div class="dropMenu">
      <div class="listName">
        <p class="categories">Categories</p>
        <i class="fas fa-caret-down"></i>
      </div>
      <ul>
        <li><a href="#" class="category">cat01</a></li>
        <li><a href="#" class="category">cat02</a></li>
        <li><a href="#" class="category">cat03</a></li>
        <li><a href="#" class="category">cat04</a></li>
        <li><a href="#" class="category">cat05</a></li>
        <li><a href="#" class="category">cat06</a></li>
        <li><a href="#" class="category">cat07</a></li>
        <li><a href="#" class="category">cat08</a></li>
        <li><a href="#" class="category">cat09</a></li>
        <li><a href="#" class="category">cat10</a></li>
      </ul>
    </div>
    <div class="dropMenu">
      <div class="listName">
        <p class="tags">Tags</p>
        <i class="fas fa-caret-down"></i>
      </div>
      <ul>
        <li><a href="#" class="tag">tag01</a></li>
        <li><a href="#" class="tag">tag02</a></li>
        <li><a href="#" class="tag">tag03</a></li>
        <li><a href="#" class="tag">tag04</a></li>
        <li><a href="#" class="tag">tag05</a></li>
        <li><a href="#" class="tag">tag06</a></li>
        <li><a href="#"...

SASS

.lists
  display: flex
  .dropMenu
    .listName
      background: lightgray
      padding: 20px
      text-align: center
      cursor: pointer
      &:hover, &.open
        color: white
      &:hover
        background: teal
      &.open
        background: darkred
        font-weight: bold

JavaScript

$(document).ready(function(){

	$('.dropMenu ul').css('display', 'none');

  $('.dropMenu').click(function(){
  	let lists = $('.dropMenu .listName');
  	$('.dropMenu .listName').removeClass('.open');
    $('.dropMenu ul').slideUp();
    
    $(this).children('.listName').addClass('open');
    $(this).children('ul').slideDown();
 });
});