JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<div class="parent">
    <div id="div1" style="display:none;">DIV1 content</div>
    <div id="div2" style="display:none;">DIV2 content</div>
    <div id="div3" style="display:none;">DIV3 content</div>
    <div id="div4" style="display:none;">DIV4 content</div>
</div>
<div class="up">
<a href="http://www.brynntweeddale.com/"><img src="http://www.brynntweeddale.com/images/logo.png" style="width: 123px; height: 60px; vertical-align: middle;" /></a>

    <button id="l1" class='btn' >ABOUT</button>
    <button id="l2" class='btn' >PHOTOGRAPHY</button>
    <button id="l3" class='btn' >DESIGN</button>
    <button id="l4" class='btn' >CONTACT</button>
</div>

JavaScript

$(function () {
    $('.parent  div').hide();
    
    $('.btn').on('click', function(){
        $('.parent  div').hide();
        $('#div' +  $(this)[0].id[1]).fadeToggle(1000);
        
    });
});