JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">

<a href="#" class="tit2" onclick="xpand('q1');"><div>1</div></a>

<div class="open" id="q1"><div class="panel">

Question 1: <br/>
Question 2:<br/>
Question 3: <br/>


</div></div>


<a href="#" class="tit" onclick="xpand('q2');"><div>2</div></a>

<div class="closed" id="q2"><div class="panel">

Question 1: <br/>
Question 2: <br/>
Question 3: <br/>


</div></div>

<a href="#" class="tit" onclick="xpand('q3');"><div>3</div></a>

<div class="closed" id="q3"><div class="panel">

Question 1: <br/>
Question 2: <br/>
Question 3: <br/>


</div></div>


<a href="#" class="tit" onclick="xpand('q4');"><div>4</div></a>

<div class="closed" id="q4"><div class="panel">

Question 1: <br/>
Question 2: <br/>
Question 3: <br/>



</div></div>


</div>

CSS

body {background-color:#dedede;}
.container {width:300px;margin:auto;border: solid #999;border-width:0 0 1px 0;font-family:arial;background-color:#fff;}
.container a {text-decoration:none;}

.tit div {background-color:#999;padding:5px 7px;color:#fff;line-height:30px;margin:0 0 1px 0;float:left;}
.tit div:hover {background-color:#aaa;}

.tit2 div {background-color:#405C9E;padding:5px 7px;color:#fff;line-height:30px;margin:0 0 1px 0;float:left;}
.tit3 div {background-color:#698C00;padding:5px 7px;color:#fff;line-height:30px;margin:0 0 1px 0;}


.open  {max-width:500px;overflow:hidden;transition: max-width 1s ease;float:left;}
.closed  {max-width:0px;overflow:hidden;transition: max-width 1s ease;float:left;}

.panel {padding:5px 7px;min-height:0px;position:relative;}
.panel a {color:#fff;text-decoration:none;}

.next {position:absolute;bottom:0;right:0;margin:0 5px 5px 0;background-color:#405C9E;color:#fff;text-decoration:none;padding:6px 20px;border-radius:3px;}

.next:hover {background-color:#5A78BC;}

.arrow {}

.al {float:right;width:6px;height:12px;margin:4px 0 0 0;padding:none;border:none;}

JavaScript

function xpand(id){

var divs = document.getElementsByClassName("open");

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

var divid = document.getElementById(id);

if(divid.className == "closed"){
		divid.className = "open";
	} else {
		divid.className = "closed";
	}
  
var titles = document.getElementsByClassName("tit2"); 
for(var i=0;i<titles.length;i++) {
titles[i].className = "tit";
}

if (divid == q4) {
divid.previousElementSibling.className = "tit3";
} else {divid.previousElementSibling.className = "tit2";

document.getElementById('q4').previousElementSibling.className = "tit";
}

}