JSFiddle - React, Tailwind, and code Playground

by jkeyes

HTML

<body>
 <div class="content_wrapper">
  <div id="nav">
   <ul id="navlist">
    <li><a id="home" class="showHideLink">HOME</a></li>
    <li><a id="about" class="showHideLink">ABOUT</a></li>
   </ul>      
  </div> 

  <div id="page-wrap">
  <!-- Content -->

   <div id="home-content" class="section active">
    <h1>WELCOME</h1>
     Welcome to our site!<br />
     Check out our YouTube channel: <a href="http://www.youtube.com/user/Foo/" target="_blank">Here</a><!-- **This link is invisible** -->
    </div>

    <div id="about-content" class="section">
     <h1>About</h1>
      About Us. [<a href="#citation1" alt="Citation Link">1</a>]<!-- **This link is invisible** --><br />
      <br />
      [<a id="citation1">1</a>] <a href="mycitation.html" target="_blank">Citation Title</a> <!-- **This link is invisible** -->
    </div>

   </div>
  </div>
</body>

JavaScript

$(document).ready(
  function() {
   $(".section").hide();
   $(".active").fadeIn();

   $("a.showHideLink").click(function(){
    var _contentId = '#' + $(this).attr('id') + "-content";

    if(!$(_contentId).hasClass("active") && $(_contentId).length)
    {
     $(".active").stop().fadeToggle(function(){
     $(".active").removeClass("active");
     $(_contentId).fadeToggle();
     $(_contentId).addClass("active");
    }
   );
  }
 });
  });