Collapse | Web Component

This component is useful when you have something on your page that needs to collapse and open vertically. Especially, when you don't know the exact height of what the item will be. dk-collapse Will handle animating from zero height to the full height of whatever it is wrapping.

Note: It is important that there is only one root element inside of the collapse. Example:

<dk-collapse>
  <div>
    <h1>Do This</h1>
    // Rest of Content
  </div>
</dk-collapse>

Open and Close

To open and close the collapse change the is-open property on dk-collapse to true or false

Properties

Use properties and attributes to control the web component as well as pass required data to it. Some properties won't have an attribute name, this is because to use that property you can't use it as an html attribute it must be set using javascript as a property of the element.

Property	Attribute	Description	Type	Default
`isOpen`	`is-open`	Use this property to control opening and closing of the collapse.	boolean	false

Events

Event	Description	Type
`collapseClosed`	Event fires when collapse finishes closing.	any
`collapseOpen`	Event fires when collapse finishes opening.	any
`collapseWillClose`	Event fires right before the collapse will close.	any
`collapseWillOpen`	Event fires right before the collapse will open.	any

Basic Collapse

<div class="collapse-btns">
        <button
            id="toggle"
            class="dk-btn__primary">
            Toggle collapse
        </button>
        <button
            data-collapse-target="#theCollapseTarget"
            id="hide"
            class="dk-btn__primary">
            Hide collapse
        </button>
        <button
            data-collapse-target="#theCollapseTarget"
            id="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>
        <dk-collapse
            id="theCollapseTarget"
            is-open="true"
            className="">
            <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>
        </dk-collapse>
        <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>

Javascript

() => {
    //   Grab the collapse you want to controlj
    const collapse = document.querySelector("#theCollapseTarget"); // Add a toggle event listener

    document.querySelector("#toggle").addEventListener("click", () => {
      collapse.isOpen = !Boolean(collapse.isOpen);
    }); // Hide Collapse

    document.querySelector("#hide").addEventListener("click", () => {
      collapse.isOpen = false;
    }); // Show Collapse

    document.querySelector("#show").addEventListener("click", () => {
      collapse.isOpen = true;
    });
  }