JSFiddle - React, Tailwind, and code Playground

by liquidmetalrob

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="folder">
  Docs
  <div class="container">
    <div class="folder">
      Section 1
      <div class="container">
        <div class="folder">
          Section 1.1
          <div class="container">
            <div class="file">
              Section 1.1.1
            </div>
            <div class="file">
              Section 1.1.2
            </div>
          </div>
        </div>
        <div class="file">
          Section 1.2
        </div>
        <div class="file">
          Section 1.3
        </div>
      </div>
    </div>
    <div class="file">
      Section 2
    </div>
    <div class="folder">
      Section 3
      <div class="container">
        <div class="file">
          Section 3.1
        </div>
        <div class="file">
          Section 3.2
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.folder {
  background: green;
}

.file {
  background: yellow;
  display: none;
}

JavaScript

$(document).ready(() => {


    $('.folder').click(
      const container = folder.find(".container").first();
      container.slideToggle();
    });


});