JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="qcont">
<div id="qcont2" class="qcont2">

<div id="sec1" class="sec1">

<section class="qht" onclick="qog(this);">
<h2>Why is my cat blue?</h2>
<span><p>Phasellus ut tempus tellus. Ut eleifend, leo ac auctor finibus, felis leo finibus elit, eu iaculis tellus ante quis ligula. Aliquam posuere ultricies mi quis cursus. Donec ut consequat nisi. Morbi in rhoncus ipsum, at fermentum mauris. Fusce molestie nisl neque, vel condimentum lacus convallis ac. Donec luctus tellus sollicitudin, hendrerit purus eu, dignissim massa.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet facilisis orci, ac tristique enim. Vestibulum facilisis finibus massa nec malesuada. Quisque molestie dolor id lacus imperdiet pellentesque. </p>
<button>Back</button></span>
</section>

<section class="qht" onclick="qog(this);">
<h2>What is the difference between purple and yellow?</h2>
<span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet facilisis orci, ac tristique enim. Vestibulum facilisis finibus massa nec malesuada. Quisque molestie dolor id lacus imperdiet pellentesque. </p>
<button>Back</button></span>
</section>

<section class="qht" onclick="qog(this);">
<h2>How can I make a cup of tea?</h2>
<span><p>Answer1......</p>
<p>Answer2...</p>
<p>Answer2...</p><button>Back</button></span>
</section>

<section class="qht" onclick="qog(this);">
<h2>Is there enough room for my piano?</h2>
<span><p>Answer1......</p>
<p>Answer2...</p>
<p>Answer2...</p><button>Back</button></span>
</section>

<section class="qht" onclick="qog(this);">
<h2>Do I get a refund on a goldfish?</h2>
<span><p>Answer1......</p>
<p>Answer2...</p>
<p>Answer2...</p><button>Back</button></span>
</section>

<section class="qht" onclick="qog(this);">
<h2>Where can I get a good curry?</h2>
<span><p>Answer1......</p>
<p>Answer2...</p>
<p>Answer2...</p><button>Back</button></span>
</section>

</div>

<div id="sec2" class="sec2">
<p>Why is my cat blue?</p>
<p>What is the...

CSS

.qcont {width:100%;position:relative;overflow:hidden;border:solid #dddddd;border-width:1px 0 0 0;padding:10px 0; font-family:arial;}

.qcont2 {position:relative;left:0;top:0;width:200%;-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
  transition: all 1s;}
.qcont2b {position:relative;left:-100%;top:0;width:200%;-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
  transition: all 1s;}

h2,.sec2 p,.sec2b p {font-size:18px;line-height:30px;margin:0;font-weight:bold;cursor:pointer;}

section button {cursor:pointer;float:right;margin:0 10px 10px 0;}

.sec1 {width:50%;float:left;}
.sec2 {width:50%;float:right;}
.sec1b {width:50%;float:right;}
.sec2b {width:50%;float:left;}

.qht span {display:none;}
.qht h2 {display:block;}
.qon h2 {display:none;}
.qon span {display:none;}

.qon2 h2,.qon2 span {display:block;}

JavaScript

function qog(el) {

if (el.className == "qon2") {

setTimeout(function(){ 

var divs = document.getElementsByClassName("qon");
for(var i = (divs.length - 1); i >= 0; i--)
{divs[i].className = "qht";}
el.className = "qht";

}, 1000);



}
else {

var divs = document.getElementsByClassName("qht");
for(var i = (divs.length - 1); i >= 0; i--)
{divs[i].className = "qon";}
el.className = "qon2";

}

var sec1 = document.getElementById("sec1");
var sec2 = document.getElementById("sec2");

if(sec1.className == "sec1"){
		sec1.className = "sec1b";
	} else {
  setTimeout(function(){ 

sec1.className = "sec1";

}, 1000);
		
	}
  
  if(sec2.className == "sec2"){
		sec2.className = "sec2b";
	} else {
    setTimeout(function(){ 

sec2.className = "sec2";

}, 1000);
		
	}


var divs2 = document.getElementById("qcont2");
  
  if(divs2.className == "qcont2"){
		divs2.className = "qcont2b";
	} else {
		divs2.className = "qcont2";
	}



}