JSFiddle - React, Tailwind, and code Playground

by fkhairzad

HTML

<ul class="featureBoxes paddingRight">
    <li class="featuresHeading features">Features</li>
	<li>
		<ul class="featureListings ">
			<li><p>Manual over ride</p></li>
			<li><p>High security options (LPCB &amp; SEAP)</p></li>
			<li><p>5 year warranty can be provided on motor parts</p></li>
		</ul>
	</li>
	<li class="featuresHeading options">Options</li>
	<li>
		<ul class="featureListings ">
			<li><p>High security</p></li>
			<li><p>Versatile fixing system to suit almost any opening</p></li>
			<li><p>Wide range of infill’s available</p></li>
		</ul>
	</li>
	<li class="featuresHeading curtain-options">Curtain Options</li>
	<li>
		<ul class="featureListings ">
			<li><p>Punched curtains options</p></li>
			<li><p>Perforated curtain options</p></li>
			<li><p>Solid curtains</p></li>
		</ul>
	</li>
</ul>

CSS

ul.featureBoxes  {
	color:#eb8f0d;
	float:left;
	list-style:none;
	width:293px;
}

.paddingRight {
	padding-right:20px;
}

ul.featureBoxes li {
	padding: 0 0 0 10px;
}

ul.featureBoxes li p {
	color:#5f717a;
	line-height:120%;
	margin:10px 0;
}

/* Icons =====================================================================*/

.features {
	background:url(../images/icons/features.png) no-repeat right center;
}

.security {
	background:url(../images/icons/security.png) no-repeat right center;
}

.options {
	background:url(../images/icons/options.png) no-repeat right center;
}

.applications {
	background:url(../images/icons/applications.png) no-repeat right center;
}

.curtain-options {
	background:url(../images/icons/curtain-options.png) no-repeat right center;
}

.extras {
	background:url(../images/icons/extras.png) no-repeat right center;
}

/* End Icons =================================================================*/

.featuresHeading {
	background-color:#8a9e3b;
	color:#fff;
	cursor:pointer;
	display:block;
	font-size:20px;
	height:30px;
	line-height:30px;
	list-style:none;
	margin:20px 0 10px 0;
}

.featuresHeading:hover {
	background-color:#336333;
}

.featureListings {
	list-style-position:outside;
	list-style-type:square;
	padding-left:20px;
}

ul.featureListings li p {
	margin:0;
	padding:0;
}

JavaScript

$(function(){
  $("ul.featureListings").hide();

  $(".featuresHeading").click(function() {
    $(this).next().find('ul.featureListings').slideToggle(300);
    return false;
  });
});