Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Default Example#

Click the buttons below to show and hide another element via class changes:

  • .collapse hides content
  • .collapsing is applied during transitions
  • .collapse.show shows content

Generally, we recommend using a button with the data-bs-target attribute. While not recommended from a semantic point of view, you can also use a link with the href attribute (and a role="button"). In both cases, the data-bs-toggle="collapse" is required.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
html
                                                
                                                    <div class="hstack gap-2">
                                                        <a class="btn btn-primary mb-2" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                                                            Link with href
                                                        </a>
                                                        <button class="btn btn-primary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                                            Button with data-bs-target
                                                        </button>
                                                    </div>
                                                    <div class="collapse" id="collapseExample">
                                                        <div class="card mb-0">
                                                            <div class="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>
                                                    </div>
                                                
                                            
Horizontal #

The collapse plugin also supports horizontal collapsing. Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our width utilities.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
html
                                                
                                                    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
                                                        Toggle width collapse
                                                    </button>
                                                    <div style="min-height: 135px;">
                                                        <div class="collapse collapse-horizontal" id="collapseWidthExample">
                                                            <div class="card card-body mb-0" style="width: 300px;">
                                                                This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
                                                            </div>
                                                        </div>
                                                    </div> 
                                                
                                            
Multiple Targets #

A <button> or <a> can show and hide multiple elements by referencing them with a selector in its href or data-bs-target attribute. Multiple <button> or <a> can show and hide an element if they each reference it with their href or data-bs-target attribute

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
html
                                                
                                                    <div class="hstack gap-2 mb-3">
                                                        <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
                                                        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
                                                        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col">
                                                            <div class="collapse multi-collapse" id="multiCollapseExample1">
                                                                <div class="card card-body">
                                                                    Some placeholder content for the first collapse component of this multi-collapse example. This panel
                                                                    is hidden by default but revealed when the user activates the relevant trigger.
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="collapse multi-collapse" id="multiCollapseExample2">
                                                                <div class="card card-body">
                                                                    Some placeholder content for the second collapse component of this multi-collapse example. This
                                                                    panel is hidden by default but revealed when the user activates the relevant trigger.
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            
© Larkon. Crafted by Techzaa