JSFiddle - React, Tailwind, and code Playground

by chakar

HTML

<div class="toggle"><a href="#" class="trigger"><span>+</span>Projectmanaging</a><div class="box">
<a title="Projectopvolging van A tot Z" href="http://www.kjk-group.be/projectmanaging/projectopvolging/">Projectopvolging van A tot Z</a><br />
<a title="Project onderhandelingen" href="http://www.kjk-group.be/projectmanaging/onderhandelingen/">Project onderhandelingen</a><br />
<a title="Project studie" href="http://www.kjk-group.be/projectmanaging/projectstudie/">Project studie</a><br />
<a title="Algemene bouwadministratie" href="http://www.kjk-group.be/projectmanaging/bouwadministratie/">Algemene bouwadministratie</a><br />
</div>

CSS

.toggle {

    padding: 0 0 2px 0;

}

.toggle .trigger {

	background:#dadada;

	color: #3b3b3b;

	display: block;

	padding: 0px 12px 0px 40px;

	line-height:38px;

	position: relative;

	text-decoration:none;

	height:1%;

}



.toggle .trigger span {

	background: url(images/marker-2.png) 0 0 no-repeat;

	display: block;

	position: absolute;

	top: 10px;

	left: 10px;

	text-indent: -9999px;

	width: 19px;

	height: 19px;

}



.toggle .trigger:hover,

.toggle .active {

	background:#1b1f22;

	color:#fff;

}



.toggle .box {

	background-color: #fefefe;

	border: 1px solid #dddddd;

	padding: 20px;

	display:none;

	}

JavaScript

jQuery(".toggle").each(function(){

		jQuery(this).find(".box").hide();

});

jQuery(".toggle").each(function(){

		jQuery(this).find(".trigger").click(function() {

				jQuery(this).toggleClass("active").next().stop(true, true).slideToggle("normal");

				return false;

		});

});