JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<div class="left" id="nav">
<ul>
<li id="light">
Lighting + Video
  <ul>
   <li>Lighting + Video 1</li>
   <li>Lighting + Video 2</li>
   <li>Lighting + Video 3</li>
   <li>Lighting + Video 4</li>
  </ul>
</li>
<li id="photo">
Photograms
    <ul>
   <li>Photograms 1</li>
   <li>Photograms 2</li>
   <li>Photograms 3</li>
  </ul>
</li>
<li id="about">
About
   <ul>
   <li>About 1</li>
   <li>About 2</li>
   <li>About 3</li>
   <li>About 4</li>
   <li>About 5</li>     
  </ul>
</li></ul>
</div>

CSS

#nav ul ul{
  display: none;
  margin-left: 25px;
}

JavaScript

$('#nav ul li')
.css({cursor: "pointer"})
.on('click', function(){
  $(this).find('ul').toggle();
})