JSFiddle - React, Tailwind, and code Playground

by oece

HTML

<div class="apdu layer">
  <div class="apdu layer entry">APDU</div>

    <div class="hci layer">
    <div class="hci layer entry">HCI</div>

        <div class="raw layer">
          <div class="raw layer entry">RAW</div>            
          <div class="raw layer entry">RAW</div>            
          <div class="raw layer entry">RAW</div>            
    </div>

    </div>

  <div class="hci layer">
    <div class="hci layer entry">HCI</div>

    <div class="raw layer">
      <div class="raw layer entry">RAW</div>        
      <div class="raw layer entry">RAW</div>        
    </div>

  </div>

CSS

div { padding: 10px; border: solid 1px #ddd; }

JavaScript

$(function() {   
    $('.hci.layer:not(.entry), .raw.layer:not(.entry)').hide();
    $('.apdu.layer.entry').click( function() {
        $(this).siblings('.hci.layer').slideToggle();
    });
    
    $('.hci.layer.entry').click( function() {
        $(this).siblings('.raw.layer').slideToggle();
    });
});