CSS: Uitklap menu

HTML

    <h2>Uitklapmenu</h2>

    <!– TEKST 1 –>
    <div class=”menu-item”>
        <button class=”menu-btn” onclick=”toggleMenu(this)”>Itslearning pagina reisje</button>
        <div class=”content”>Hoi,

Kan je voor mij een itslearning pagina aanmaken met alle leerlingen uit h4? De pagina mag heten: buitenlandse reis 2026/2027.

Als docenten graag toevoegen:
Pieter
Daisy
Jolanda
        </div>
    </div>
<b>Javascript</b><br>
    <!– TEKST 2 –>
    <div class=”menu-item”>
        <button class=”menu-btn” onclick=”toggleMenu(this)”>Instroom en SOM/MB vragen</button>
        <div class=”content”>Zoef de Haas is later dit jaar ingestroomd en zij geeft aan nog niet bij Duits in Its Learning te kunnen. 
        
Desiree Harmsen staat niet in som bij MB en ze staat ook niet in de MB groep. Kan je hier naar kijken?

Je hebt laatst een nieuwe MB map aangemaakt, M4MB. De leerlingen zijn toegevoegd. Ik heb een inleverbakje aangemaakt maar de leerlingen kunnen geen content zien. Kan je hier naar kijken?

Dankjewel!
        </div>
    </div>
<b>CSS</b><br>
    <!– TEKST 3 –>
    <div class=”menu-item”>
        <button class=”menu-btn” onclick=”toggleMenu(this)”>Toner Zwart Gang 2e</button>
        <div class=”content”>HE beheerder,

Toner ZWART is op bij de havo. Zou je kunnen wisselen?
        </div>
    </div>

    <!– KOPIEER DIT BLOK OM EEN NIEUWE TOE TE VOEGEN:
    <div class=”menu-item”>
        <button class=”menu-btn” onclick=”toggleMenu(this)”>Titel van de knop</button>
        <div class=”content”>
Hier komt de nieuwe tekst te staan.
        </div>
    </div>
    –>

Javascript

<script>
        function toggleMenu(button) {
            button.classList.toggle(“active”);
            var content = button.nextElementSibling;
            
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
                content.classList.remove(“open”);
            } else {
                content.style.maxHeight = content.scrollHeight + 36 + “px”;
                content.classList.add(“open”);
            }
        }
    </script>

CSS

<style>
        body {
            font-family: Arial, sans-serif;
            max-width: 100%;
width: 550px;
            margin: 0 auto;
            padding: 0 20px;
  //          background-color: #f9f9f9;
        }

        .menu-item {
            margin-bottom: 15px;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-webkit-box-shadow: 1px 1px 1px 2px #5557;
        }

        .menu-btn {
            background-color: #ccca;
            color: #555;
            cursor: pointer;
            padding: 10px 0 10px 15px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 14px;
            font-weight: bold;
            transition: background-color 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .menu-btn:hover {
            background-color: #333;
color: #eee;
        }

        .menu-btn::after {
            content: ‘\25BC’; /* Pijltje naar beneden */
            font-size: 12px;
            transition: transform 0.2s ease;
        }

        .menu-btn.active::after {
            transform: rotate(180deg); /* Draait het pijltje om */
        }

        .content {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out, padding 0.2s ease-out;
            white-space: pre-line; /* Behoudt regeleinden in de tekst */
            color: #333;
            line-height: 1.5;
        }

        .content.open {
            padding: 0 15px 0 20px;
        }
h2 {
    font-size: 24px;
    color: #444;
    padding: 0px 0px 0px 0px;
    padding: 0px 5px 1px 0px;
    margin: 0px 0px 15px 0px;
    letter-spacing: 0;
}
.content.open {
  padding: 10px 5px 15px 15px;
}
    </style>

Geef een reactie Reactie annuleren