JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<p>
WTF!
</p>

<div id="parent" class="cont">
<span id="title1" class="titleOn"><a href="#" onclick="hide(), tab1()">Rice Pudding</a></span>
<div id="text1" class="text"><p>Pellentesque nulla ante, hendrerit vel tempor vel, malesuada et sapien. Aliquam sapien neque, vestibulum sed dignissim vel, eleifend sodales nulla. Duis placerat, urna ac varius ornare, nunc ligula porttitor justo, a sollicitudin sapien lorem sed nibh. Proin ultricies nibh consectetur ante fringilla posuere.</p></div>

<span  id="title2"class="title"><a href="#" onclick="hide(), tab2()">Spotted Dick</a></span>
<div id="text2" class="texthide"><p>In vel urna eu ligula lacinia eleifend. Quisque interdum quis orci sed commodo. Duis id felis pharetra, posuere mauris vitae, placerat ligula. Etiam efficitur sapien vitae semper facilisis.</p></div>

<span  id="title3"class="title"><a href="#" onclick="hide(), tab3()">Apple Pie</a></span>
<div id="text3" class="texthide"><p>Quisque tincidunt ultrices molestie. Maecenas ultricies neque id erat venenatis, et rhoncus purus vestibulum. Nunc at massa a diam congue ullamcorper eget quis lorem. Duis in arcu iaculis, efficitur sem eget, sollicitudin sem. Cras malesuada ligula vitae pharetra blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>

</div>

CSS

body {background-color:#fff;margin:10px;}
.cont {display:block;border: solid #999;border-width:0 0 0 1px;}

.title a {background-color:#eee;line-height:20px;display:block;float:left;border: solid #999;border-width:1px 0 1px 1px;padding:5px 10px;text-decoration:none;color:#000;}

.titleOn a {background-color:#fff;line-height:20px;display:block;float:left;border: solid #999;border-width:1px 0 1px 1px;padding:5px 10px;border-bottom-color:#fff;text-decoration:none;color:#000;}

.cont span:nth-last-child(2) a {border-width:1px;}



.text {z-index:-1;background-color:#fff;display:block;position:absolute;margin-top:31px;border: solid #999;border-width:1px 1px 1px 1px;padding:0 10px;}

.texthide {z-index:-1;background-color:#fff;display:none;position:absolute;margin-top:31px;border: solid #999;border-width:1px 1px 1px 1px;padding:0 10px;}

JavaScript

function hide() {
var nodes = document.getElementById('parent').childNodes;
for(var i=0; i<nodes.length; i++) {
if (nodes[i].nodeName.toLowerCase() == 'div') {
nodes[i].className = "texthide";
}
if (nodes[i].nodeName.toLowerCase() == 'span') {
nodes[i].className = "title";
}
}
}

function tab1() {
document.getElementById("text1").className = "text";
document.getElementById("title1").className = "titleOn";
}
function tab2() {
document.getElementById("text2").className = "text";
document.getElementById("title2").className = "titleOn";
}
function tab3() {
document.getElementById("text3").className = "text";
document.getElementById("title3").className = "titleOn";
}
function tab4() {
document.getElementById("text4").className = "text";
document.getElementById("title4").className = "titleOn";
}
function tab5() {
document.getElementById("text5").className = "text";
document.getElementById("title5").className = "titleOn";
}
function tab6() {
document.getElementById("text6").className = "text";
document.getElementById("title6").className = "titleOn";
}