JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<div class="panel panel-primary">
    
    <div class="panel-heading panel-collapsed">
       <h3 class="panel-title" style="padding: 15px;"><center> COMO CHEGAR?</center></h3>
       <span class="pull-right clickable"><i class="fa fa-angle-down"></i></span>
    </div>
    
    <div class="panel-body" style="padding:0;">
        <p>content virá aqui....</p>                 
                                         
    </div>
    
</div>

CSS

.panel-heading {
    background-color: #6f5499;
}

.panel-body {
    background: #f5f5f5;
    padding: 25px;
    display: none;
}

JavaScript

$(document).on('click', '.panel-heading', function(e){
    var $this = $(this);
	if(!$this.hasClass('panel-collapsed')) {
		$this.parents('.panel').find('.panel-body').slideUp();
		$this.addClass('panel-collapsed');
        
		$this.find('i').removeClass('fa fa-angle-up').addClass('fa fa-angle-down');
	} else {
		$this.parents('.panel').find('.panel-body').slideDown();
		$this.removeClass('panel-collapsed');
        
		$this.find('i').removeClass('fa fa-angle-down').addClass('fa fa-angle-up');
	}
});