Collapse

Basic Collapse


<button class="collapseTrigger" data-target="#demo1">Collapse</button>
<div id="demo1" class="collapse">
    <p>...</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Show Collapse


<button class="collapseTrigger" data-target="#demo2">Collapse</button>
<div id="demo2" class="collapse show">
    <p>...</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Accordion

Basic


<div class="accordionGroup">
    <div class="accordion show">
        <a href="javascript:void(0)" class="accordionTrigger">Acoordion 1</a>
        <div class="accordionBody">
            <p>...</p>
        </div>
    </div>
    <div class="accordion">
        <a href="javascript:void(0)" class="accordionTrigger">Acoordion 2</a>
        <div class="accordionBody">
            <p>...</p>
        </div>
    </div>
    <div class="accordion">
        <a href="javascript:void(0)" class="accordionTrigger">Acoordion 3</a>
        <div class="accordionBody">
            <p>...</p>
        </div>
    </div>
</div>

Acoordion 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Acoordion 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Acoordion 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Accordion Collape


<div class="accordionGroup collapse">
    <div class="accordion show">
        <a href="javascript:void(0)" class="accordionTrigger">Acoordion 1</a>
        <div class="accordionBody">
            <p>...</p>
        </div>
    </div>
    <div class="accordion">
        <a href="javascript:void(0)" class="accordionTrigger">Acoordion 2</a>
        <div class="accordionBody">
            <p>...</p>
        </div>
    </div>
    <div class="accordion">
        <a href="javascript:void(0)" class="accordionTrigger">Acoordion 3</a>
        <div class="accordionBody">
            <p>...</p>
        </div>
    </div>
</div>

Acoordion 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Acoordion 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Acoordion 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Dropdown Active & Disabled


<div class="dropdown click">
<button type="button" class="ddTrigger">Dropdown button</button>
<div class="ddmenu">
    <a class="ddmItem" href="#">Link 1</a>
    <a class="ddmItem active" href="#">Link 2</a>
    <a class="ddmItem disabled" href="#">Link 3</a>
</div>
</div>

Hover Dropdown


<div class="dropdown hover">
<button type="button" class="ddTrigger">Dropdown button</button>
<div class="ddmenu">
    <a class="ddmItem" href="#">Link 1</a>
    <a class="ddmItem active" href="#">Link 2</a>
    <a class="ddmItem disabled" href="#">Link 3</a>
</div>
</div>

Previous Next