Collapse | Vanilla

The collapse component is used to collapse an element on the page.

Note: The collapse element must wrap everything inside of it otherwise the collapse animation is not smooth.

Add the classname dk-collapse and a unique ID to the element that needs to be collapsed. To have the collapsed content shown initially add the classname dk-show to the element.

The collapse element can be toggled, shown or hidden either by JavaScript or by adding the data-collapse-target attribute to a different element on the page.

Control with Attributes

To set an element as the controller for the collapse add data-collapse-target="#collapseID". By default when clicked it will toggle the collapse. You can force the element to show or hide the collapse by adding the data-collapse-action="hide" or data-collapse-action="show" attributes.

Control with JavaScript

Digit provides a global helper function to make it easier to programmatically open and close a collapse.

// Using a string selector
dk.collapse("#idOfCollapse").toggle();
dk.collapse("#idOfCollapse").hide();
dk.collapse("#idOfCollapse").show();

Accordion

Usage Notes:

Accordion Panel:
- Every panel is wrapped by .dk-accordion__panel
Accordion Trigger Button:
- Has a unique ID.
- Has the aria-controls attribute and that attribute has the id of the panel it opens.
- Inside the button you have the .trigger__title SPAN as well as the .trigger__icon SPAN.
Accordion Collapse:
- Has the class of dk-collapse and its only child element is the .dk-accordion__content DIV. Without this the animation to open and close the accordion panel will not be smooth.
- Has a unique ID.
- Has region of "role": role="region"
- Has the aria-labeledby attribute set to the ID of the trigger that is controlling it.

JS

If the accordion markup is not on the page when the global.js file from digit runs the accordion won't automatically bootstrap. You will have to manually init the accordion.

dk.accorion("cssSelectorOfAccordion");

Default Open Panel

To set an accordion panel to be open by default you must set the aria-expanded attribute on the panel trigger to be true

Allow Multiple Panels

By default only one accordion panel can be open at a time but by adding the data-allow-multiple attribute to the outermost .dk-accrodian element the accordion will allow multiple panels to open at once.

Code Example:

<div
    class="dk-accordion"
    id="uniqueAccodrionID">
    <div class="dk-accordion__panel">
        <button
            class="dk-accordion__trigger"
            id="uniqueBtnId_0"
            aria-controls="uniquePanelID_0">
            <span class="trigger__title">
                Personal Information 0
            </span>
            <span class="trigger__icon"></span>
        </button>
        <div
            id="uniquePanelID_0"
            role="region"
            aria-labelledby="uniqueBtnId_0"
            class="dk-collapse">
            <div class="dk-accordion__content ">
                Lorem, ipsum dolor sit amet
                consectetur adipisicing elit.
                Minima saepe eius ipsum itaque
                perspiciatis. Iusto distinctio
                ex deleniti quas est eius
                officiis nostrum molestiae
                autem neque quae animi
                laboriosam explicabo
                reprehenderit aut corporis,
                deserunt aspernatur, ad totam
                odio assumenda qui tenetur
                cumque. Commodi quam accusamus
                optio quasi laborum aliquam.
                Incidunt.
            </div>
        </div>
    </div>
    <div class="dk-accordion__panel">
        <button
            class="dk-accordion__trigger"
            id="uniqueBtnId_1"
            aria-controls="uniquePanelID_1">
            <span class="trigger__title">
                Personal Information 1
            </span>
            <span class="trigger__icon"></span>
        </button>
        <div
            id="uniquePanelID_1"
            role="region"
            aria-labelledby="uniqueBtnId_1"
            class="dk-collapse">
            <div class="dk-accordion__content ">
                Lorem, ipsum dolor sit amet
                consectetur adipisicing elit.
                Minima saepe eius ipsum itaque
                perspiciatis. Iusto distinctio
                ex deleniti quas est eius
                officiis nostrum molestiae
                autem neque quae animi
                laboriosam explicabo
                reprehenderit aut corporis,
                deserunt aspernatur, ad totam
                odio assumenda qui tenetur
                cumque. Commodi quam accusamus
                optio quasi laborum aliquam.
                Incidunt.
            </div>
        </div>
    </div>
    <div class="dk-accordion__panel">
        <button
            class="dk-accordion__trigger"
            id="uniqueBtnId_2"
            aria-controls="uniquePanelID_2">
            <span class="trigger__title">
                Personal Information 2
            </span>
            <span class="trigger__icon"></span>
        </button>
        <div
            id="uniquePanelID_2"
            role="region"
            aria-labelledby="uniqueBtnId_2"
            class="dk-collapse">
            <div class="dk-accordion__content ">
                Lorem, ipsum dolor sit amet
                consectetur adipisicing elit.
                Minima saepe eius ipsum itaque
                perspiciatis. Iusto distinctio
                ex deleniti quas est eius
                officiis nostrum molestiae
                autem neque quae animi
                laboriosam explicabo
                reprehenderit aut corporis,
                deserunt aspernatur, ad totam
                odio assumenda qui tenetur
                cumque. Commodi quam accusamus
                optio quasi laborum aliquam.
                Incidunt.
            </div>
        </div>
    </div>
</div>

Code Preview:

Show More

This is one style of button to indicate additional text or elements in a long description. Put it below a collapse component.

Add DIV with CLASS dk-show-more
Inside, add a BUTTON with CLASS dk-show-more__button
Set data-collapse-target to the ID of the collapsing section
Inside the button add:
- dk-show-more__more SPAN with text "More"
- dk-show-more__less SPAN with text "Less"


<div class="example-container">
        <div class="">
            <p class="dk-bold">
                This is the beginning of the text,
                always visible.
            </p>
            <p class="">
                Lorem ipsum dolor sit amet,
                consectetur adipiscing elit, sed
                do eiusmod tempor incididunt ut
                labore et dolore magna aliqua.
            </p>
        </div>
        <div
            id="theCollapseTarget"
            class="dk-collapse">
            <div class="dk-collapse__section">
                <p class="dk-bold">
                    This text is hidden behind the
                    show more
                </p>
                <p class="">
                    Ut enim ad minim veniam, quis
                    nostrud exercitation ullamco
                    laboris nisi ut aliquip ex ea
                    commodo consequat. Ut enim ad
                    minim veniam, quis nostrud
                    exercitation ullamco laboris
                    nisi ut aliquip ex ea commodo
                    consequat.
                </p>
            </div>
        </div>
        <div class="dk-show-more">
            <button
                data-collapse-target="#theCollapseTarget"
                class="dk-btn__secondary dk-show-more__button">
                <span class="dk-show-more__more">
                    More
                </span>
                <span class="dk-show-more__less">
                    Less
                </span>
            </button>
        </div>
    </div>

Basic Collapse

<div class="collapse-btns">
        <button
            data-collapse-target="#theCollapseTarget"
            class="dk-btn__primary">
            Toggle collapse
        </button>
        <button
            data-collapse-target="#theCollapseTarget"
            data-collapse-action="hide"
            class="dk-btn__primary">
            Hide collapse
        </button>
        <button
            data-collapse-target="#theCollapseTarget"
            data-collapse-action="show"
            class="dk-btn__primary">
            Show collapse
        </button>
    </div>
    <div class="example-container">
        <div class="section">
            <p class="">
                Lorem ipsum dolor sit amet,
                consectetur adipiscing elit, sed
                do eiusmod tempor incididunt ut
                labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi
                ut aliquip ex ea commodo
                consequat.
            </p>
        </div>
        <div
            id="theCollapseTarget"
            class="dk-collapse dk-show">
            <div class="section">
                <p class="dk-bold">
                    This section will collapse
                    when the buttons are pressed
                </p>
                <p class="">
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit,
                    sed do eiusmod tempor
                    incididunt ut labore et dolore
                    magna aliqua.
                </p>
            </div>
        </div>
        <div class="section">
            <p class="">
                Ipsum dolor sit amet, consectetur
                adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud
                exercitation ullamco laboris nisi
                ut aliquip ex ea commodo
                consequat. Ut enim ad minim
                veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex
                ea commodo consequat.
            </p>
        </div>
    </div>