JSFiddle - React, Tailwind, and code Playground

by TCloud

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<a href="#" class="btn">Toggler</a>

<div class="dropdown" data-toggle="true">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque porro, enim nobis doloremque iste laudantium amet dolorum eum autem perspiciatis tempore doloribus! Vel, minima praesentium. A veritatis aspernatur ab fuga.</p>
</div>

CSS

.dropdown[data-toggle="false"] {
  display: none;
}

.dropdown[data-toggle="true"] {
  padding: 10px;
  box-shadow: 0 12px 14px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  display: block;
}

.btn {
  display: inline-block;
  margin-bottom: 15px;
}

JavaScript

$(".btn").click(function(e){
    if( $(".dropdown").attr( "data-toggle" ) == "true" ) {
    	$(".dropdown").attr( "data-toggle", false )
    } else {
    	$(".dropdown").attr( "data-toggle", true )
    }
    
    e.stopPropagation();
});

$(document).on('click', function(e) {
  if (!$(e.target).closest(".btn").length) {
    $(".dropdown").attr( "data-toggle", false )
  }
  e.stopPropagation();
});