JSFiddle - React, Tailwind, and code Playground

by jessikwa

HTML

<div class="page_wrapper">
  <!--start nav -->
  <div class="nav_wrapper">
    <div class="nav_sidebar">
      <!--start menu item 1-->
      <div class="nav_menuItem" data-toggle="collapsed">
        <div class="nav_label">
          Menu Label 1
        </div>
        <div class="nav_panel">
          <ul>
            <li>Item One</li>
            <li>Item Two</li>
            <li>Item Three</li>
            <li>Item Four</li>
            <li>Item Five</li>
            <li>Item Six</li>
            <li>Item Seven</li>
          </ul>
          <hr>
          <ul>
            <li>Item One</li>
            <li>Item Two</li>
            <li>Item Three</li>
            <li>Item Four</li>
            <li>Item Five</li>
            <li>Item Six</li>
            <li>Item Seven</li>
            <li>Item Eight</li>
            <li>Item Nine</li>
            <li>Item Ten</li>
            <li>Item Eleven</li>
            <li>Item Twelve</li>
          </ul>
        </div>
      </div>
      <!--end menu item 1-->
      <!--start menu item 2 -->
      <div class="nav_menuItem">
        <div class="nav_label">
          Menu Label 2
        </div>
        <div class="nav_panel" data-toggle="collapsed">
          <ul>
            <li>Item One</li>
            <li>Item Two</li>
            <li>Item Three</li>
            <li>Item Four</li>
            <li>Item Five</li>
            <li>Item Six</li>
            <li>Item Seven</li>
          </ul>
          <hr>
          <ul>
            <li>Item One</li>
            <li>Item Two</li>
            <li>Item Three</li>
            <li>Item Four</li>
            <li>Item Five</li>
            <li>Item Six</li>
            <li>Item Seven</li>
            <li>Item Eight</li>
            <li>Item Nine</li>
            <li>Item Ten</li>
            <li>Item Eleven</li>
            <li>Item Twelve</li>
          </ul>
        </div>
      </div>
      <!--end menu item 2-->
      <!--start menu item 3 -->
      <div...

CSS

.page_wrapper {
  padding-left: 250px;
}

.nav_wrapper {
    background: #5e82a4;
    border-right: 1px solid #5e82a4;
    border-left: 1px solid #5e82a4;
    z-index: 99;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 250px;
    margin-left: -250px;
    width: 250px;
    overflow-x: hidden;
    overflow-y: auto;
}
.nav_menuItem {
  padding: 3px;
}
.nav_menuItem[data-toggle='expanded'] {
  background: #27547d;
}
.nav_label {
  color: white;
  padding: 3px 5px;
  cursor: pointer;
}
.nav_label:hover {
  background: #27547d;
}
.nav_panel {
  background: #eee;
  padding: 5px 8px;
  display: none;
}
.nav_panel ul {
  margin: 0;
  padding: 0;
}
.nav_panel ul li {
  list-style: none;
  padding: 2px;
  cursor: pointer;
}
.nav_panel ul li:hover {
  color: orange;
}

JavaScript

$(".nav_label").click(function() {
	var parent = $(this).closest(".nav_menuItem");
	var panel = parent.find(".nav_panel");
  if (parent.attr("data-toggle") == "collapsed") {
  	$(".nav_menuItem").attr("data-toggle", "collapsed").find(".nav_panel").hide();
  	parent.attr("data-toggle", "expanded");
    panel.show();
  } else {
  	console.log("is false, set to true and collapse");
  	parent.attr("data-toggle", "collapsed");
    panel.hide();
  }
});