JSFiddle - React, Tailwind, and code Playground

by 8odoros

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://use.fontawesome.com/d2b3f19e0e.js"></script>
<div class="panel panel-default">
		        <div class="panel-heading" role="tab" id="headingFive">
		            <a class="collapsed faq-links">
		            <i id="icon" class="fa fa-info-circle fa-3x"></i></a>
		        </div>
		    </div>

		    <br />

		    <div class="panel panel-default">
		        <div class="panel-heading" role="tab" id="heading13">
		          <a class="collapsed faq-links">
		            <i id="icon" class="fa fa-heartbeat fa-3x"></i></a>
		        </div>       
		    </div>

		    <br />
		    
		    <div class="panel panel-default">
		        <div class="panel-heading" role="tab" id="headingFour">
		            <a class="collapsed faq-links" >
		            	<i id="icon" class="fa fa-comments fa-3x"></i></a>
		        </div>
		    </div>

CSS

.fa-plus-square-o {
vertical-align: middle;
}
.fa-minus-square-o {
vertical-align: middle;
}
a.faq-links {
font-size: 20px;
}
.faq-links:hover {
text-decoration: none;
}
.faq-links:focus {
text-decoration: none;
}

JavaScript

$('.faq-links').click(function(){
		    var notCollapsed = $(this).find('i').hasClass('fa-times');		     	
        
        //Remiove crosses from all buttons
		    $('.faq-links').find('i').removeClass('fa-times');		    
        
        //Reset the default icon for each button 
		    $('.faq-links:eq(0)').find('i').addClass('fa-info-circle');
		    $('.faq-links:eq(1)').find('i').addClass('fa-heartbeat');
		    $('.faq-links:eq(2)').find('i').addClass('fa-comments');
        
        //Bring the cross if needed
			  if(!notCollapsed) $(this).find('i').attr("class",'fa fa-times fa-3x');
});