JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<div class="left">
    <ul>
        <li class="headerline1">Headline1</li>
        <li class="headerline2">Headline2</li>
        <li class="headerline3">Headline3</li>
    </ul>
</div>
<div class="header1">
    <h3> Headline1 </h3>
    <br/>
     <p>Content here...</p>
</div>
<div class="header2">
    <h3> Headline2 </h3>
     <br/>
     <p>Content here...</p>
</div>
<div class="header3">
    <h3> Headline3 </h3>
     <br/>
    <p>Content here...</p>
</div>

CSS

.left
{
    height:500px;
    width:250px;
    float:left;
    position:relative;
}
ul li 
{
    list-style-type:none;
}
.header1, .header2, .header3
{
    display:none;
    height:500px;
    width:700px;
   
   
}

JavaScript

$(".headerline1").click(function () {
        $(".header1").show();
        $(".header2").hide();
        $(".header3").hide();
    });
$(".headerline2").click(function () {
        $(".header2").show();
        $(".header1").hide();
        $(".header3").hide();
    });

$(".headerline3").click(function () {
        $(".header3").show();
        $(".header1").hide();
        $(".header2").hide();
    });