JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<div class="accordion_cont">
	<ul>
		<li class="current">
			<div class="header_main"><h2><div class="accordian_arrow icon">&nbsp;</div>Useful Essential Oils</h2></div>
			<div class="content">
				<h3> Which essential oils for low blood pressure are useful?</h3><p>The following essential oils have traditionally been used for low blood pressure:</p><ul><li><strong><a href="https://www.amrita.net/basil-holy-organic.html">Holy Basil Essential Oil</a></strong> – diffuse it</li><li><strong><a href="https://www.amrita.net/basil-sweet-linalol-organic.html">Sweet Linalol Basil Essential Oil</a></strong> – diffuse it or dilute it 2% in any carrier oil (10 drops per tablespoon) and apply on the heart and chest area</li><li><strong><a href="https://www.amrita.net/blog/rosemary-oil-uses-essential">Rosemary Essential Oil</a></strong> – for fainting, nervous disorders, exhaustion: diffuse it or dilute it 1% in a carrier oil (5 drops per tablespoon) and use in a whole body massage, or dilute it and use it in an aromatic bath. <strong>Note:</strong> Do not use if you are pregnant or have epilepsy.</li></ul><p><strong>Note:</strong> Everyone is different. We recommend you try each of the above essential oils one at a time (rather than blending them) to determine which one you respond to best.</p><br> <br><p><strong>Disclaimer:</strong> The statements made on this page have not been evaluated by the U.S. Food and Drug Administration (FDA). They are not intended to diagnose, cure or prevent any disease. If a condition persists, please contact your physician or healthcare provider. The information provided is not a substitute for a face-to-face consultation with a healthcare provider, and should not be construed as medical advice.</p>
			</div>
		</li>
		<li class="current">
			<div class="header_main active"><h2><div class="accordian_arrow icon">&nbsp;</div>About the Condition</h2></div>
			<div class="content">
				<h3> What is blood pressure?</h3><p>The force of the blood...

CSS

*{
  margin: 0; padding: 0;
}
li{
  list-style: none;
}
.content{
  display: none;
}
.accordion_cont li:first-child .content{
  display: block;
}
.header_main h2{
  color: red;
}

JavaScript

$('.header_main').click(function(){
	$(this).addClass('active');
  $(this).next().addClass('active');
  $(this).next().slideDown();
  $(this).parent().siblings().find('.header_main').removeClass('active');
  $(this).parent().siblings().find('.content').hide();
});