JSFiddle - React, Tailwind, and code Playground

by chintansoni

HTML

<ul>

<li><a href="#" class="shownavsection link1 arr"> link 1</a></li>
<li><a href="#" class="shownavsection link2 arr"> link 2</a></li>
<li><a href="#" class="shownavsection link3 arr"> link 3</a></li>
</ul>

<div class="section link1 mm cf">1</div>
<div class="section link2 mm cf">2</div>
<div class="section link3 mm cf">3</div>

CSS

li{
list-style-type:none; list-style-position:inside}

a.arr:link, a.arr:visited 
{ 
width:160px; border-bottom:1px solid #CCC; float:left;
font-family:Tahoma, Arial, Helvetica, sans-serif; 
font-size:12px;
background-color: #FFF; 
height:21px; display:block;
text-decoration:none;
color:#999999;
padding:5px 0px 0px 10px
}

 a.arr:hover
 {
 background-color:#f2f2f2;
 font-family:Tahoma, Arial, Helvetica, sans-serif;
 font-size:12px;color:#999999 
}

.on {
background: #000 !important;
}
.mm {
border:1px solid #013b5d;
border-top: 1px solid #fff;
width: 960px;
height:auto;
padding:10px 5px 20px 5px;
display:none;
margin-top:10px;
clear: both;
-moz-box-shadow: 0 8px 10px #888;
-webkit-box-shadow: 0 8px 10px #888;
box-shadow: 0 8px 10px #888;    

font-family:Arial, Helvetica, sans-serif;
}

JavaScript

$(window).load(function(){
    
$(".shownavsection").click(function () {
var cls = this.className.match(/link1|link2|link3/),
    box = $(".section."+cls[0]);
    $(".shownavsection").not(this).removeClass("on");
$(this).toggleClass("on");
// slideUp() on all .countries elements
$(".section").not(box).slideUp();

box.slideToggle();   

//$(".arr").not($(this)).toggleClass("on");
;
return false;


});
});