Collapse

<link href="https://laarmwork.arnaudjacques.fr/res/css/collapse.css" rel="stylesheet">
<link href="https://laarmwork.arnaudjacques.fr/res/css/button.css" rel="stylesheet">
<script src="https://laarmwork.arnaudjacques.fr/res/js/laarmwork.js"></script>
            

<a class="btn" data-toggle="collapse" data-target="#collapseExample">Toggle</a>
<div class="collapse" id="collapseExample">
    <div class="p-2 shadow-hover-1 border-1 link-reset flex m-t-2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue metus nisl, in accumsan enim lobortis vel. Sed blandit augue lacus, et scelerisque velit sollicitudin non.
    </div>
</div>
            

<a class="btn" data-toggle="collapse" data-target="#firstCollapse">Toggle first element</a>
<a class="btn" data-toggle="collapse" data-target="#secondCollapse">Toggle second element</a>
<div class="collapse" id="firstCollapse">
    <div class="p-2 shadow-hover-1 border-1 link-reset flex m-t-2">
        firstCollapse: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue metus nisl, in accumsan enim lobortis vel. Sed blandit augue lacus, et scelerisque velit sollicitudin non.
    </div>
</div>
<div class="collapse" id="secondCollapse">
    <div class="p-2 shadow-hover-1 border-1 link-reset flex m-t-2">
        secondCollapse: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue metus nisl, in accumsan enim lobortis vel. Sed blandit augue lacus, et scelerisque velit sollicitudin non.
    </div>
</div>
            

<a class="btn" data-toggle="collapse" data-target="#collapseActive">Toggle active element</a>
<div class="collapse active" id="collapseActive">
    <div class="p-2 shadow-hover-1 border-1 link-reset flex m-t-2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue metus nisl, in accumsan enim lobortis vel. Sed blandit augue lacus, et scelerisque velit sollicitudin non.
    </div>
</div>
            

<div class="accordion">
    <a class="btn accordion" data-toggle="collapse" data-target="#item-1">Collapsible Group Item #1</a>
    <div class="collapse active" id="item-1">
        <div class="p-2 shadow-hover-1 border-1 link-reset flex">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue metus nisl, in accumsan enim lobortis vel. Sed blandit augue lacus, et scelerisque velit sollicitudin non.
        </div>
    </div>
    <a class="btn accordion" data-toggle="collapse" data-target="#item-2">Collapsible Group Item #2</a>
    <div class="collapse" id="item-2">
        <div class="p-2 shadow-hover-1 border-1 link-reset flex">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue metus nisl, in accumsan enim lobortis vel. Sed blandit augue lacus, et scelerisque velit sollicitudin non.
        </div>
    </div>
    <a class="btn accordion" data-toggle="collapse" data-target="#item-3">Collapsible Group Item #3</a>
    <div class="collapse" id="item-3">
        <div class="p-2 shadow-hover-1 border-1 link-reset flex">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue metus nisl, in accumsan enim lobortis vel. Sed blandit augue lacus, et scelerisque velit sollicitudin non.
        </div>
    </div>
    <a class="btn accordion" data-toggle="collapse" data-target="#item-4">Collapsible Group Item #4</a>
    <div class="collapse" id="item-4">
        <div class="p-2 shadow-hover-1 border-1 link-reset flex">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue metus nisl, in accumsan enim lobortis vel. Sed blandit augue lacus, et scelerisque velit sollicitudin non.
        </div>
    </div>
</div>