Gå til sidens indhold

Komponenter

Skjul og vis (Collapse)

Du kan bruge ”Skjul og vis”-komponenter (formet som fx knapper eller tjekbokse) til at holde indhold skjult, indtil brugeren vælger at aktivere det. Når brugeren klikker på komponenten, folder indholdet sig ud, eller brugeren får fx mulighed for at indtaste information.

Radioknap - skjul og vis indhold

<div class="container js-radio-toggle-group">
    <fieldset>
        <legend>
            <h2 class="h4">Vælg en radioknap</h2>
        </legend>
        <ul class="nobullet-list">
            <li>

                <input id="id-radio1" type="radio" name="radio-group1"
                    value="Value" class="form-radio  radio-large " checked
                    data-js-target='#collapse-radio1'
                    aria-controls='collapse-radio1'
                    aria-expanded='false' />
                <label for="id-radio1" class="">Radioknap viser indhold
                    <span class="sr-only">Udfyld informationer
                        herunder</span></label>

                <div id="collapse-radio1" aria-hidden="true"
                    class="box-border-l collapsed">
                    <div class="py-4">

                        <div class="form-group">
                            <label class="form-label "
                                for="textinput1">Inputfelt med
                                label</label>

                            <input class="form-input  input-width-m "
                                placeholder="" id="textinput1" value=""
                                name="text1" type="text">
                        </div>

                    </div>
                </div>
            </li>
            <li>

                <input id="id-radio2" type="radio" name="radio-group1"
                    value="Value" class="form-radio  radio-large "
                    data-js-target='#collapse-radio2' />
                <label for="id-radio2" class="">Radioknap viser indhold
                    <span class="sr-only">Udfyld informationer
                        herunder</span></label>

                <div id="collapse-radio2" aria-hidden="true"
                    class="box-border-l collapsed">
                    <div class="py-4">

                        <div class="form-group">
                            <label class="form-label "
                                for="textinput2">Inputfelt med
                                label</label>

                            <input class="form-input  input-width-m "
                                placeholder="" id="textinput2" value=""
                                name="text2" type="text">
                        </div>

                    </div>
                </div>
            </li>
        </ul>
    </fieldset>
</div>

Tilgængelighed

  • Radioknapperne skal kunne aktiveres og håndteres fra tastatur.
  • Skjul ikke meningsbærende indhold som fx beskrivelser/labels med denne funktionalitet.
  • Vis kun de ekstra muligheder, når brugeren har foretaget et valg.

Brugervenlighed

Anvendes til

Vise yderligere information eller en ekstra funktion relevant til brugerens valg, fx kan du vise et email-felt, når brugeren vælger at ville kontaktes per email.

Anvendes ikke til

Anvend ikke denne mulighed til inline-placerede radioknapper.

Vejledning

Hold det enkelt. Hvis du har behov for at eksponere større mængder af ekstra funktionalitet, bør du overveje, at fordele det ud over flere sider i stedet.

Checkbox - skjul og vis indhold

<div class="container">
    <div class="form-group">
        <fieldset>
            <legend>
                <h2 class="h4">Vælg fra listen</h2>
            </legend>
            <ul class="nobullet-list">
                <li>

                    <input id="id-checkbox1" type="checkbox" name="Name"
                        value="Value"
                        class="form-checkbox  checkbox-large js-checkbox-toggle-content"
                        data-js-target='#collapse-check1'
                        aria-controls='collapse-check1'
                        aria-expanded='false' />
                    <label for="id-checkbox1" class="">Checkbox viser
                        indhold</label>

                    <div id="collapse-check1" aria-hidden="true"
                        class="box-border-l collapsed">
                        <div class="py-4">
                            <p>Dette indhold bliver vist når checkboxen er
                                valgt.</p>
                        </div>
                    </div>
                </li>
                <li>

                    <input id="id-checkbox2" type="checkbox" name="Name2"
                        value="Value"
                        class="form-checkbox  checkbox-large js-checkbox-toggle-content"
                        checked data-js-target='#collapse-check2'
                        aria-controls='collapse-check2'
                        aria-expanded='false' />
                    <label for="id-checkbox2" class="">Checkbox viser
                        indhold</label>

                    <div id="collapse-check2" aria-hidden="true"
                        class="box-border-l collapsed">
                        <div class="py-4">
                            <p>Dette indhold bliver vist når checkboxen er
                                valgt.</p>
                        </div>
                    </div>
                </li>
            </ul>
        </fieldset>
    </div>
</div>

Generel skjul og vis indhold funktionalitet

<div class="container">
    <button class="button button-secondary js-collapse"
        data-js-target='#collapse1' aria-controls='collapse1'
        aria-expanded='false'>Vis indhold</button>
    <div id="collapse1" aria-hidden="true"
        class="box-border-l mt-4 collapsed">
        <div class="py-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                do eiusmod tempor incididunt ut labore et dolore magna
                aliqua.</p>
        </div>
    </div>
</div>

Tilgængelighed

  • Skjul ikke meningsbærende indhold med denne funktionalitet.
  • Skjult indhold skal fortsat overholde dokumentets outline (overskriftshierarki) og tilgængelighedskrav.

Brugervenlighed

Anvendes til

Vise yderligere information eller en ekstra funktion relevant til brugerens valg.

Anvendes ikke til
  • Anvendes ikke som erstatning for accordions.
  • Anvendes ikke til meningsbærende indhold som fx sidens brødtekst.

Vejledning

  • Hold det enkelt. Hvis du har behov for at eksponere større mængder af ekstra funktionalitet eller indhold, bør du overveje, at fordele det ud over flere sider i stedet.