JSFiddle - React, Tailwind, and code Playground

by jtbowden

HTML

<ul id="switches">
    <li id="home" style="cursor: hand; cursor: pointer">HOME</li>
    <li id="vouchers" style="cursor: hand; cursor: pointer">GIFT VOUCHERS</li>
    <li id="reservations" style="cursor: hand; cursor: pointer">RESERVATIONS</li>       
    <li id="contact" style="cursor : hand; cursor: pointer">CONTACT</li>     
    <li id="menu" style="cursor : hand; cursor: pointer">MENU</li>
</ul>

<div id="content" style="width: 500px; margin-top: 15px">
    <div id="content_home" class="active">
        home
    </div>
    <div id="content_vouchers">
        voucher
    </div>
    <div id="content_reservations">
        reserv
    </div>
    <div id="content_contact">
        map
        <div id="map_canvas" style="width:480px; margin-left:20px; height:300px">
        </div>
    </div>
    <div id="content_menu">
        menu
    </div>
</div>

CSS

#content > div {
     border: 1px solid black; 
     background-color: lightYellow;
     display:none;  
}

#map_canvas {
     background-color: lightGreen;   
}

JavaScript

$( function() {
   
    $('#switches > li').click( function() {
       
        var name = $(this).attr('id');
        
        $('#content > div').hide();
        $('#content_'+name).show();
        
    });
    
});