JSFiddle - React, Tailwind, and code Playground

by Olavxxx

HTML

<nav>
    <span data-meny_id="under-meny_1">Førstevalget</span>
    <span data-meny_id="under-meny_2">Andrevalget</span>
    <span data-meny_id="under-meny_123">(defekt, se i JS-konsollet!)</span>
    <section id="under-meny_1">
        lipsum
    </section>
    <section id="under-meny_2">
        dolor
    </section>
</nav>
<hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices felis a velit ullamcorper pharetra. Aliquam ultricies velit metus. Curabitur adipiscing tincidunt est quis pretium. Praesent viverra tellus purus, sit amet interdum est gravida nec. Aliquam faucibus sollicitudin turpis nec bibendum. Integer nec est vitae nulla volutpat ultrices. Vivamus suscipit tortor urna, vel consequat justo sagittis ac. Praesent quis felis in neque iaculis posuere. Nullam libero risus, tempus in fringilla sit amet, faucibus eget eros. Nam sapien lacus, feugiat egestas porttitor vel, dignissim eget diam. Sed sed justo varius, consequat justo in, ultrices odio. Donec tincidunt sagittis tortor at porttitor. Praesent dolor libero, auctor eu tortor et, sollicitudin vehicula nunc. Nulla posuere nibh quam, id euismod turpis sollicitudin sagittis. Integer interdum ultrices bibendum.

CSS

nav section {
    display:none;
    padding: .2em;
    margin: .2em;
}
nav span {
    padding: .2em;
    margin: .2em;
    border: 1px dashed #CFCFCF;
    cursor:pointer;
}

JavaScript

$("nav span").click(function(){var a="#"+$(this).attr("data-meny_id");if($(a).length!=0){if(!$(a).is(":visible")){$("nav section").hide();$(a).animate({opacity:1,height:"toggle"},100,function(){})}else{$(a).effect("shake")}}else{console.log("ERR::404::"+a)}});