JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
  <ul>
  <li>Clan Challenges</li>
  <li>Clan Ops</li>
  <li>Lone Wolf</li>
  </ul>
  </div>
<div class="slidingDiv">
<div class="challenges">
Clan Challenges
</div>
</div>
<div class="slidingDiv">
<div class="challenges">
Clan Ops
</div>
</div>
<div class="slidingDiv">
<div class="challenges">
Lone Wolf
</div>
</div>

CSS

#navigation a{
text-decoration:none;
color:#c0c0c0;
 }
    #navigation ul{
list-style-type:none;
width:800px;
margin:0 auto;
 }
 #navigation ul li{
 width:200px;
 height:50px;
 font-size:14px;
 border-top:4px solid #c0c0c0;
 display:inline-block;
 margin:0 20px 0 0;
 cursor:pointer;
  }
  #navigation ul li:hover{
  border-top:4px solid #F9EEA4;
  }
 #challenges{
 background:#000;
  }
  .show_hide {
display:none;
}

JavaScript

$(document).ready(function() { 
    $(".slidingDiv").hide(); 
    $('#navigation li').click(function() { 
        $('.slidingDiv').eq($(this).index()).slideToggle();
    }); 
});