JSFiddle - React, Tailwind, and code Playground

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>

CSS

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

JavaScript

/*
Eksempelkode utarbeidet av Olav Alexander Mjelde for å illustrere hvordan man kan lage en Ribbon-meny ved hjelp av JQuery, veldig enkelt :-) Må selvsagt styles litt og kanskje man velger andre transitions, etc.

JQuery trigger for klikk på span som er inne i nav (man kan selvsagt bruke ID, klasser, m.m.)
*/
$( "nav span" ).click(function() {
  // Fyll myTarget med attributtens verdi (data-meny_ID)
  var myTarget = '#'+$(this).attr('data-meny_id');

    //Før vi gjør noe, sjekker vi om myTarget er ulik 0 (eksisterer).
    if ($(myTarget).length != 0) {
        
        // legg merke til utropstegn i starten, det betyr IKKE (motsatt av). Altså her blir det IKKE er synlig.
        if (!$(myTarget).is(":visible")) { 
          $("nav section").hide(); // skjul først alle (kan ikke ha to åpne samtidig)
            
          $( myTarget ).animate({
            opacity: 1,
            height: "toggle" /* Toggle gjør motsatt av hva den er*/
          }, 100, function() {
          });
        }
        else { // synlig fra før (du er på dette menyelementet)
             $(myTarget).effect( "shake" );
        }
    }
    else {
        console.log("ERR::404::"+myTarget);
    }
});