JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<style>#d2 a {color:#405C9E;height:36px;opacity:100;margin:0 0 3px 0;}</style>

<div class="contain">

<div class="buts">

<span class="down" onclick="doit('d1');"><i class="arrow"></i></span><a href="#">Bridging Loans</a>

<span id="d1" class="drop">
<a href="#">Bridging Loans</a>
<a href="#">Bridging Loans</a>
<a href="#">Bridging Loans</a>
<a href="#">Bridging Loans</a>
</span>

<span class="down" onclick="doit('d2');"><i class="arrow"></i></span><a href="#">Development Finance</a>

<span id="d2" class="drop">
<a href="#">Bridging Loans</a>
<a href="#">Bridging Loans</a>
<a href="#">Bridging Loans</a>
<a href="#">Bridging Loans</a>
</span>

<span class="down" onclick="doit('d3');"><i class="arrow"></i></span><a href="#">Commercial Mortgages</a>

<span id="d3" class="drop">
<a href="#">Bridging Loans</a>
<a href="#">Bridging Loans</a>
<a href="#">Bridging Loans</a>
<a href="#">Bridging Loans</a>
</span>



</div>

</div>

CSS

body {font-family:arial;} .contain {max-width:320px;margin:auto;}

.buts a {display:block;background-color:#405C9E;color:#fff;height:36px;line-height:36px;padding:0 0 0 10px;margin:0 0 3px 0;text-decoration:none;}

.down {float:right;width:36px;height:36px;background-color:#405C9E;color:#fff;line-height:32px;text-align:center;border:solid #fff;border-width:0 0 0 2px;z-index:100;}

i {border: solid white;border-width: 0 3px 3px 0;display: inline-block;padding: 3px;}

.arrow {transform: rotate(45deg);-webkit-transform: rotate(45deg);}

.drop a {display:block;background-color:#DFEFFF;color:#DFEFFF;height:0px;line-height:36px;padding:0 0 0 10px;margin:0 0 0px 0;text-decoration:none;border:solid #405C9E;border-width:0 4px;overflow:hidden;opacity:0;
  transition-property: height, color, opacity;
  transition-duration: 1s, 0.5s,0.5s;
  transition-delay: 0s, 0.5s,0.5s;

}

.drop2 a {display:block;background-color:#DFEFFF;color:#405C9E;height:36px;line-height:36px;padding:0 0 0 10px;margin:0 0 3px 0;text-decoration:none;border:solid #405C9E;border-width:0 4px;opacity:100;
  transition-property: height, color, opacity;
  transition-duration: 1s, 0.5s,0.3s;
  transition-delay: 0s, 0.5s,0.3s;
}

JavaScript

function doit(id){

var spans = document.getElementsByClassName("drop2");

for(var i=0;i<spans.length;i++) {
spans[i].className = "drop";
}

var divid = document.getElementById(id);

if(divid.className == "drop"){
		divid.className = "drop2";
	} else {
		divid.className = "drop";
	}



}