JSFiddle - React, Tailwind, and code Playground

by neuroflux

HTML

<ul class="navigation">
      <li name="section1" id="link1">ABOUT</li>
      <li name="section2" id="link2">WHY HIRE ME</li>
      <li name="section3" id="link3">JOURNEY</li>
      <li name="section4" id="link4">INSTAGRAM</li>
      <li name="section5" id="link5">CONTACT</li>         
    </ul>

<br /><br />

    <div class="section" id="section1">section1</div>
    <div class="section" id="section2">section2</div>
    <div class="section" id="section3">section3</div>
    <div class="section" id="section4">section4</div>
    <div class="section" id="section5">section5</div>

CSS

.navigation{
  font-size:12px;
  font-family: Georgia, serif;
    cursor: pointer;
}
.navigation li:hover {color: red; }
.section { display: none; }

JavaScript

$('.navigation li').on('click', function() {
  $('.section').hide(); //hide all sections
  var whichSection = $(this).attr('name'); //get the section name 
  $('#'+whichSection).toggle(); //toggle it
});
$(document).ready(function() {
   $('#section1').show(); //show the first 
});