JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css&quot; integrity=&quot;sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ&quot; crossorigin=&quot;anonymous&quot;&gt;"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


<button class="btn" type="button" data-parent="#blocks"  data-toggle="collapse" data-target=".block" aria-expanded="false" aria-controls=".block">show me</button>



<div id="blocks">
   <div class="collapse block" id="block-1">
    FIRST BLOCK
   </div>
   <div class="collapse block" id="block-2">
SECOND BLOCk
   </div>
   <div class="collapse block" id="block-3">
    THIRD BLOCK
   </div>
</div>

CSS

.collapse
{
  display:none;
}
.show
{
  display:block
}

JavaScript

$(function() {
 $('button').on('click',function(){
				
				var objectID=$(this).attr('data-target');
				
				if($(objectID).hasClass('collapse'))
				{
                                    $(objectID).collapse('show');
				}
        else{
                                    $(objectID).collapse('hide');
				}

                    });


});