JSFiddle - React, Tailwind, and code Playground

by Belle Jema Bantilan

HTML

<div class="toggle-con">

	<div class="toggle-question">Click Here A</div>
	<div class="toggle-det">This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 </div>

</div>
<div class="toggle-con">

	<div class="toggle-question">Click Here B</div>
	<div class="toggle-det">This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 This is a content 1 </div>

</div>

CSS

.toggle-question{ width: 100%; padding: 8px 12px 8px 28px; color: #fff; font-weight: bold; background: #0081ff; margin: 5px auto; position: relative; }
.toggle-question:before{ content: "+"; margin-right: 10px; top: 8px; }
.toggle-question.be:before{ content: "-"; }
.toggle-det{ display: none; background: #c2edff; margin: -5px auto; padding: 12px; }

JavaScript

// toggle content 
	$('.toggle-question').each(function(){
		$(this).click(function(){
		  $('.toggle-question').siblings('.toggle-det').hide('slow');
		  $(this).siblings('.toggle-det').stop(true, false, true).toggle('slow');

	      var active = ($(this).hasClass('be')) ? true : false; 
	      $('.toggle-question').removeClass('be');
	      if(!active) $(this).addClass('be'); 
			
		});
	});