Collapse

A content area which can be collapsed and expanded.

Card header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse provident nihil, omnis nesciunt aliquid voluptatum eligendi accusantium hic et totam inventore consequatur sit, voluptas quam. Voluptatem nesciunt dignissimos impedit facere!

Card header

Collapse

By default, any number of panels can be expanded at a time. The first panel is expanded in this example.

<div class="SnCard">
    <div class="SnCard-header" data-collapsetrigger="collapseExample1">
        Card header<i class="icon-angle-down"></i>
    </div>
    <div class="SnCard-body SnCollapse SnCollapse-expanded" data-collapse="collapseExample1">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse provident nihil, omnis nesciunt aliquid
            voluptatum eligendi accusantium hic et totam inventore consequatur sit, voluptas quam. Voluptatem
            nesciunt dignissimos impedit facere!</p>
    </div>
</div>
<div class="SnCard">
    <div class="SnCard-header" data-collapsetrigger="collapseExample2">
        Card header<i class="icon-angle-down"></i>
    </div>
    <div class="SnCard-body SnCollapse SnCollapse-expanded" data-collapse="collapseExample2">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse provident nihil, omnis nesciunt aliquid
            voluptatum eligendi accusantium hic et totam inventore consequatur sit, voluptas quam. Voluptatem
            nesciunt dignissimos impedit facere!</p>
    </div>
</div>

API

Property	Class
Collapse	`.SnCollapsedata-collapse="collapseExample1")`
Target	`data-collapsetrigger="collapseExample1"`