JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div id="menu">
    <p>Menu</p>
    <ul>
        <li><a href="#1">Item 1</a></li>
        <li><a href="#2">Item 2</a></li>
        <li><a href="#3">Item 3</a></li>
    </ul>
</div>

<div id="articleholder">
    <article id="1">
        <h1>1st Article</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sollicitudin dui, ut commodo massa. Pellentesque eleifend lacinia vulputate. Aenean et eros quis odio placerat feugiat. Donec feugiat urna venenatis euismod condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sollicitudin dui, ut commodo massa. Pellentesque eleifend lacinia vulputate. Aenean et eros quis odio placerat feugiat. Donec feugiat urna venenatis euismod condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sollicitudin dui, ut commodo massa. Pellentesque eleifend lacinia vulputate. Aenean et eros quis odio placerat feugiat. Donec feugiat urna venenatis euismod condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sollicitudin dui, ut commodo massa. Pellentesque eleifend lacinia vulputate. Aenean et eros quis odio placerat feugiat. Donec feugiat urna venenatis euismod condimentum.</p>
    </article>
    <article id="2">
        <h1>2nd Article</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sollicitudin dui, ut commodo massa. Pellentesque eleifend lacinia vulputate. Aenean et eros quis odio placerat feugiat. Donec feugiat urna venenatis euismod condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sollicitudin dui, ut commodo massa. Pellentesque eleifend lacinia vulputate. Aenean et eros quis odio placerat feugiat. Donec feugiat urna venenatis euismod condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sollicitudin dui, ut commodo massa. Pellentesque eleifend lacinia vulputate. Aenean et eros quis odio placerat feugiat. Donec feugiat urna venenatis euismod...

CSS

div#menu {
    border:1px solid black;
    padding:5px;
}

div#menu p,
div#menu ul,
div#menu ul li {
    display:inline;
}

JavaScript

$(document).ready(function(){
    $("#articleholder article:not(#1)").hide(); //smart CSS
    var toon = function(artikel) {
        $("#articleholder article").hide(); //we will hide everything so that future clicks will work as well
        artikel.show(); //greatly simplified
    };
    
    $("#menu a").click(function(event){
        var ref = $(this).attr('href');
        toon($(ref)); //just plug in the jQuery object as the argument
    });
});

/*
$ (document). ready(function(){
     $ ('article').hide();
     var zichtbaar = $('article').first();
     zichtbaar.show();
     var toon = function(artikel) {
     zichtbaar.hide();
     zichtbaar = artikel;
     zichtbaar.show();
     };

     $('#menu a').click(function(event) {
     var ref = $(this).attr('href');
     toon(ref);
     event.preventDefault();
     });
});
*/