JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
  <ul>
  <li id="slick-toggle">Clan Challenges</li>
  <li id="slick-toggle">Clan Ops</li>
  <li id="slick-toggle">Lone Wolf</li>
  </ul>
  </div>
<div id="slidingDiv">
<div id="challenges">
hey
</div>
</div>
<div id="slidingDiv">
<div id="challenges2">
hey
</div>
</div>
<div id="slidingDiv">
<div id="challenges3">
hey
</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(); 
    $(".show_hide").show(); 
    $('.show_hide').click(function() { 
        $(this).next("#slidingDiv").slideToggle(); 
    }); 
});