JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">
<div class="type">


          <label><input type="radio" name="type" value="auto" id="auto" checked>
Automatic</label>


         <label><input type="radio" name="type" value="man" id="man">
Manual</label>

</div><div class="clear"></div>


<a href="#" class="sec stat2" onclick="xpand('q1');"><div>Loan Required</div></a>

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

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

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

</div></div>


<a href="#" class="sec stat1" onclick="xpand('q2');"><div>Rates & Fees</div></a>

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

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

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

</div></div>


<a href="#" class="sec stat1" onclick="xpand('q3');"><div>Security</div></a>

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

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

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

</div></div>


<a href="#" class="sec stat1" onclick="xpand('q4');"><div>Staged Releases<span class="opt">Optional</span></div></a>

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

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

<div class="next"><a href="#" onclick="xpand('q5');">Next</a></div>

</div></div>

<a href="#" class="sec stat1" onclick="xpand('q5');"><div>Capital Reductions <span class="opt">Optional</span></div></a>

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

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

<div class="next"><a href="#" onclick="xpand('q6');">Calculate</a></div>

</div></div>


<a href="#" class="sec stat1" onclick="xpand('q6');"><div>Results</div></a>

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

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



</div></div>


</div>

CSS

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

.sec div {padding:5px 7px;color:#fff;line-height:30px;margin:0 0 1px 0;}

.stat1 div {background-color:#999;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAMAQMAAAB7mV5tAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABxJREFUCNdjYGHgYZBhsGGoYfgDhDVAlgxQhAUALRgDwaJjUH0AAAAASUVORK5CYII=');background-repeat: no-repeat;background-position:center right 6px;}
.stat1 div:hover {background-color:#aaa;}

.stat2 div {background-color:#405C9E;}
.stat3 div {background-color:#698C00;}

.clear {clear:both;}

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

.panel {padding:5px 7px;min-height:200px;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;}

.opt {font-size:12px;float:right;margin-right:15px;}

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

.type {font-size:15px;color:#fff;line-height:40px;text-align:right;padding:0 10px 0 0;
	border-bottom: 40px solid #777;
	border-left: 40px solid transparent;
  margin-left:auto;
	height: 0;
	width: auto;float:right;
  border-radius:5px 0 0 0;
}

.type input {}
.type label active {color:#ddd;}
#auto input[type=radio] + label {color:#eee;}
#auto input[type=radio]:checked + label {color:#ddd;}

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("sec stat2"); 
for(var i=0;i<titles.length;i++) {
titles[i].className = "sec stat1";
}

if (divid == q6) {
divid.previousElementSibling.className = "sec stat3";
} else {divid.previousElementSibling.className = "sec stat2";

document.getElementById('q6').previousElementSibling.className = "sec stat1";
}

}