JSFiddle - React, Tailwind, and code Playground

by OfSilence

HTML

<p class="question">How long have they been in business?</p>
                                    <div class="answer">It takes years to understand the complex nature of drug testing and learn all the regulations. TCA has been doing this for over 15 years and has the respect of all the main compliance agencies in the country  - DOT, TDLR, DISA, NCMS, HASAP/NASAP, PTC, First Advantage, TADTS, etc.</div>
                                    <p class="question">Have any of their customers ever failed an audit?</p>
                                    <div class="answer">It is the DPM's responsibility to educate their customer and make sure they are meeting the requirements. TCA has never had any of their customers fail!</div>
                                    <p class="question">What if you're in the middle of an audit right now?</p>
                                    <div class="answer">Many other companies will not let you join if you're in the middle of an audit. TCA will jump in immediately and provide your certificate as soon as you join. We are well-respected by the compliance companies - once they see you're working with us they know you're in good hands.</div>
                                    <p class="question">What happens when you call your Consortium from the road at 3am on a Sunday because you were in an accident?</p>
                                    <div class="answer">At TCA, a knowledgeable member will answer your call 24/7, 365 days a year.</div>
                                    <p class="question">What if you're in Timbuktu and get called for a Random?</p>
                                    <div class="answer">It's not feasible or cost-effective for you to have to drive miles away at the drop of a hat. TCA has locations nationwide and they are searchable on our website 24/7 by zip code and area. We work with all the major labs – Quest, CRL, LabOne, OneSource, Kroll/Alere and more!</div>
                                    <p...

CSS

.answer {
padding: 5px 10px;
background-color:#fafafa;
font-size:13px;
color:#191919
}
.question {
	margin: 1px;
	color:#000;
	padding: 10px 10px;
	cursor: pointer;
	position: relative;
	background-color:#CCC;
	font-size: 18px;
	font-variant: small-caps;
	font-family: Tinos, serif;
}
.question:hover, 
.question .current {
	margin: 1px;
	padding: 10px 10px;
	cursor: pointer;
	position: relative;
	text-decoration:none;
	color:#fff;
	background: #404040;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#404040), to(#242424));
	background: -webkit-linear-gradient(#404040, #242424);
	background: -moz-linear-gradient(#404040, #242424);
	background: -ms-linear-gradient(#404040, #242424);
	background: -o-linear-gradient(#404040, #242424);
	background: linear-gradient(#404040, #242424);
	box-shadow:1px 1px 1px #b5b5b5;
	font-size: 18px;
	font-variant: small-caps;
	font-family: Tinos, serif;
}

JavaScript

$(document).ready(function() {
  $(".answer").hide();
  //toggle the componenet with class msg_body
  $(".question").click(function()
  {
    $(this).next(".answer").slideToggle(500);
  });
});