JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="1" class="select">
  <div class="main">
    <span>1</span>
  </div>
  <div>
    <ul id="1_sub" class="hide">
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</div>
<div id="2" class="select">
  <div class="main">
    <span>1</span>
  </div>
  <div>
    <ul id="2_sub" class="hide">
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</div>
  
<div id="3" class="select">
  <div class="main">
    <span>1</span>
  </div>
  <div>
    <ul id="3_sub" class="hide">
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</div>

</body>

CSS

div.select {
    float:left;
  margin: 10px;
  padding: 20px;
  background: red;
  cursor: pointer;
 }

JavaScript

$(document).ready(function() {
    $('.hide').hide();
  
    $('.select').click(function() {
        $('.hide').slideUp(200);
        $(this).find('.hide').slideDown(200);
    });
    $(document).click(function(e){
        if(!$('.select').is(e.target) || !$('.select').has(e.target)){
            $('.hide').slideUp(200);
        }
    });
});