Collapse

Basic

Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio enim laboriosam, ut, cum impedit pariatur odio quasi excepturi harum dolore similique accusantium placeat numquam itaque, alias quod laudantium vel animi.


<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapse-1">
    toggle collapse
</button>
<div id="collapse-1" class="collapse">
    <p class="p-3 border">
        lorem...
    </p>
</div>

Collapse is automatically enabled once you provide the data-toggle="collapse" and data-target attribute to the toggler.

However, you can enable it manually by calling the raven.collapse() and pass an HTML Element or NodeList of the toggler to the method.


const collapseitems = document.queryselector(".toggle-collapse")
raven.collapse(collapseitems)

Shown On Init

You can initially show the collapsible item by adding the show class to the collapsible item.


<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapse-2">
    toggle collapse
</button>
<div id="collapse-2" class="collapse show">
    <p class="p-3 border">
        lorem...
    </p>
</div>