Collapse

Preview

---

Usage

<div class="collapse-box" data-height="150">
    <div class="content">
        <p>
            Lorem ipsum dolor sitamet consectetur adipisicing elito 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem.
            Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
            Utenim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eius
            mod ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem.
            Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
            Utenim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
    </div>
    <div class="collapse-button">
        <a data-button-open-text="Close" data-button-close-text="Show all">Show all</a>
    </div>
</div>

---

Installation

<script src='themekit/scripts/tab-accordion.js'></script>

---

Settings

Name	Type	Description
Options	Attribute	data-height="123" Height in px of the content area when it's closed. data-time="123" Opening and closing time in milliseconds. Default 500ms. data-button-close-text="value" The button text when the conent area is closed. data-button-open-text="value" The button text when the conent area is open.
Alignment	CSS	Add one of the following classes to the component to align it: align-center,align-left,align-right. Try it Align center Align right