1. Home
  2. Components

Components menu

Collapse

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle.

The collapse component is used to minimise the left-hand navigation when viewing on a mobile device. It requires the content to be duplicated and use the <div class="d-none d-lg-block"></div> for the desktop view and <div class="d-lg-none"></div> for the mobile view. The collapse code sits within the mobile view class.

Some placeholder content for the collapse component using a link with href. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the collapse component using a button with data-bs-target. This panel is hidden by default but revealed when the user activates the relevant trigger.

HTML

                                
                                    

                                        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-bs-target </button>
                                        
                                        <div class="collapse" id="collapseExample">
                                            <div class="card card-body">
                                                Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                                            </div>
                                        </div>

Left-hand menu HTML

                                
                                    

                                        <div class="col-xxl-3 col-lg-3 col-md-12 col-sm-12">
                                            <div class="d-none d-lg-block">
                                                <ul class="side--navigation">
                                                    <li class="side--navigation-items">
                                                        <ul>
                                                            <li class="side--navigation-item-child"> <a class="side--navigation-item-link" href=""> Item 1 </a> </li>
                                                            <li class="side--navigation-item-child"> <a class="side--navigation-item-link" href=""> Item 2 </a> </li>
                                                            <li class="side--navigation-item-child"> <a class="side--navigation-item-link" href=""> Item 3 </a> </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </div> <!-- // Desktop view -->
                                            <div class="d-lg-none">
                                                <div class="component-collapse-card col-12 float-start">
                                                    <div class="col-xxl-9 col-lg-9 col-md-9 col-sm-8 col-12 float-start">
                                                        <h2>Left-hand menu</h2>
                                                    </div>
                                                    <div class="col-xxl-3 col-lg-3 col-md-3 col-sm-4 col-12 float-end"> 
                                                        <a class="card-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-lefthandmenu" aria-expanded="false" aria-controls="collapse-lefthandmenu"> View menu <i class="card-link-icon fa-solid fa-circle-chevron-down" aria-hidden="true"></i> </a> 
                                                    </div>
                                                    <div class="collapse col-12 float-start" id="collapse-lefthandmenu">
                                                        <ul class="side--navigation">
                                                            <li class="side--navigation-items">
                                                                <ul>
                                                                    <li class="side--navigation-item-child"> <a class="side--navigation-item-link" href=""> Item 1 </a> </li>
                                                                    <li class="side--navigation-item-child"> <a class="side--navigation-item-link" href=""> Item 2 </a> </li>
                                                                    <li class="side--navigation-item-child"> <a class="side--navigation-item-link" href=""> Item 3 </a> </li>
                                                                </ul>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div> <!-- // Mobile view - Collapse component --> 
                                        </div>