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

/*
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);
    }
});