Visa och dölj

Det absolut enklaste sättet är att använda details elementet.

<details>
    <summary>
        <strong>Visa/dölj</strong>
    </summary>
    <p>
        Detta är en text som visas när användaren klickar på
        <strong>Visa/dölj</strong>. Default stilarna på detta är tjänliga och
        fungerar bra. Men med css kan användbarheten och tydligheten förbättras.
    </p>
</details>

Exempel med css

Html koden är snarlik den från föregående exmpel. Här används en div som container och ett par klasser har adderats.

<details class="hideshow">
    <summary class="hideshow__summary">Visa/dölj</summary>
    <div class="hideshow__body">
        <p>
            Detta är en text som visas när användaren klickar på
            <strong>Visa/dölj</strong>.
        </p>
    </div>
</details>

.hideshow {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-grey);
}
.hideshow__summary {
    font-size: 1.25rem;
    font-weight: 500;
    cursor: pointer;
}
.hideshow__body {
    padding-top: 0.75rem;
}

Med javascript

Med javascript får du större kontroll över vilka element och hur de visas, men priset är mer komplex kod, mer css och javascript. Här är det viktigt att du som utvecklare gör en avvägning för vad som är lämpligast.

Prova att disabla javascript i utvecklarverktygen. Texten visas då ändå, detta är för att javascript ska förbättra användarupplevelsen, inte försämra den. Det brukar kallas för progressive enhancement på engelska.

• Visa/dölj

  Detta är en text som visas när användaren klickar på Visa/dölj.

• Visa/dölj

  Detta är en text som visas när användaren klickar på Visa/dölj.

Strukturen för elementen är nu en lista.

<ul class="wjs__list flow">
    <li>
        <button class="wjs__button">
            Visa/dölj
        </button>
        <div class="wjs__content">
            <p>
                Detta är en text som visas när användaren klickar på
                <strong>Visa/dölj</strong>.
            </p>
        </div>
    </li>
</ul>

Css koden behöver nu en reset på button elementet samt kod för pilarna. Pilarna skapas med hjälp av content parametern i ett pseudo-element, ::before .

För att kunna visa och dölja används en hidden klasse med display:none, som slås av och på med javascript.

.wjs__button {
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 500;
    background-color: inherit;
    border: none;
    border-bottom: 1px solid var(--color-grey);
    width: 100%;
    text-align: left;
}
.wjs__button::before {
    content: "►";
}
.wjs__button--active::before {
    content: "▼";
}
.wjs__content {
    padding-top: 0.75rem;
}
.wjs__content--hidden {
    display: none;
}

Öppna och kolla javascript filen för att se kommentarer kring dess funktion.

Scriptet itererar över elementen så att scriptet anpassar sig efter antalet element.

window.addEventListener('load', (event) => {
    const buttons = document.querySelectorAll('.wjs__button');
    const contents = document.querySelectorAll('.wjs__content');

    contents.forEach((content) => {
        content.classList.toggle('wjs__content--hidden');
    });

    buttons.forEach((button, index) => {
        button.addEventListener('click', (e) => {
            e.preventDefault();
            e.target.nextElementSibling.classList.toggle('wjs__content--hidden');
            e.target.classList.toggle('wjs__button--active');
        });
    });
});