JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<span id="test">
  <p>test</p>
  
</span>
<ul>
  <li>1
    <ul class="clickable hidden"> 
      <li>1.1
        <ul class="clickable hidden"> 
          <li>1.1.1</li>
          <li>1.1.2</li>
          <li>1.1.3</li>
        </ul>
      </li>
      <li>1.2
        <ul class="clickable hidden"> 
          <li>1.2.1</li>
          <li>1.2.2</li>
          <li>1.2.3</li>
        </ul>
      </li>
      <li>1.3</li>
    </ul>
  </li>
  <li>2
    <ul class="clickable hidden"> 
      <li>2.1
        <ul class="clickable hidden"> 
          <li>2.1.1
            <ul class="clickable hidden"> 
              <li>2.1.1.1</li>
              <li>2.2.2.1</li>
              <li>2.3.2.1</li>
            </ul>
          </li>
          <li>2.2.2</li>
          <li>2.3.2</li>
        </ul>
      </li>
      <li>2.2</li>
      <li>2.3</li>
    </ul>
  </li>
  <li>3
    <ul class="clickable hidden"> 
      <li>3.1</li>
      <li>3.2</li>
      <li>3.3</li>
    </ul>
  </li>
</ul>

CSS

.hidden {
  display: none;
}

JavaScript

$("#test").click(function(){

console.log("works!");

});