BootKit home · Manual home

COLLAPSE

Creating fully customized collapse widgets.


Examples

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default bk-widget bk-bd-off">

        <h4 class="bk-mg-off" role="tab" id="headingOne">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"
               class="panel-heading bk-block bk-bg-success bk-bg-darken bk-fg-white">
                Collapsible Group Item #1
            </a>
        </h4>

        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <a href="javascript:" class="panel-body bk-block bk-bg-white bk-bg-lighten bk-fg-success bk-fg-darken">
                <div class="pull-left bk-mg-r-10">
                    <div class="bk-round bk-bd-off bk-bg-success bk-bg-darken bk-icon bk-icon-2x bk-icon-default bk-fg-white">
                        <i class="fa fa-comment fa-2x"></i>
                    </div>
                </div>
                <p class="bk-mg-off-b">
                    Chris Pearson wrote a new blog post outlining his latest insights on mobile development. Very interesting for
                    all of you developers out there as you all joined in with your ideas.
                </p>
            </a>
        </div>

    </div>

    <div class="panel panel-default bk-widget bk-bd-off">

        <h4 class="bk-mg-off" role="tab" id="headingTwo">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"
               class="collapsed panel-heading bk-block bk-bg-danger bk-bg-darken bk-fg-white">
                Collapsible Group Item #2
            </a>
        </h4>

        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <a href="javascript:" class="panel-body bk-block bk-bg-white bk-bg-lighten bk-fg-danger bk-fg-darken">
                <div class="pull-left bk-mg-r-10">
                    <div class="bk-round bk-bd-off bk-bg-danger bk-bg-darken bk-icon bk-icon-2x bk-icon-default bk-fg-white">
                        <i class="fa fa-cogs fa-2x"></i>
                    </div>
                </div>
                <p class="bk-mg-off-b">
                    Our dashboard has been updated to have better access and to allow on the fly editing. Read more about it on
                    our daily mailing journal and do not hesitate to let us know what you think.
                </p>
            </a>
        </div>
    </div>

    <div class="panel panel-default bk-widget bk-bd-off">

        <h4 class="bk-mg-off" role="tab" id="headingThree">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"
               class="collapsed panel-heading bk-block bk-bg-info bk-bg-darken bk-fg-white">
                Collapsible Group Item #3
            </a>
        </h4>

        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <a href="javascript:" class="panel-body bk-block bk-bg-white bk-bg-lighten bk-fg-info bk-fg-darken">
                <div class="pull-left bk-mg-r-10">
                    <div class="bk-round bk-bg-info bk-bg-darken bk-bd-off bk-icon bk-icon-2x bk-icon-default bk-fg-white">
                        <i class="fa fa-umbrella fa-2x"></i>
                    </div>
                </div>
                <p class="bk-mg-off-b">
                    The C# development team has completed their last sprint for their project and are celebrating with some champagne! Join them on floor 3
                    in the dining hall.
                </p>
            </a>
        </div>
    </div>
</div>

Without margins and removing some radius

<div class="panel-group" id="accordionb" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default bk-widget bk-bd-off bk-rd-off-b">

        <h4 class="bk-mg-off" role="tab" id="headingOneb">
            <a data-toggle="collapse" data-parent="#accordionb" href="#collapseOneb" aria-expanded="true" aria-controls="collapseOneb"
               class="panel-heading bk-block bk-bg-warning bk-bg-darken bk-fg-white">
                Collapsible Group Item #1
            </a>
        </h4>

        <div id="collapseOneb" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneb">
            <a href="javascript:" class="panel-body bk-block bk-bg-white bk-bg-lighten bk-fg-warning bk-fg-darken">
                <div class="pull-left bk-mg-r-10">
                    <div class="bk-round bk-bd-off bk-bg-warning bk-bg-darken bk-icon bk-icon-2x bk-icon-default bk-fg-white">
                        <i class="fa fa-comment fa-2x"></i>
                    </div>
                </div>
                <p class="bk-mg-off-b">
                    Chris Pearson wrote a new blog post outlining his latest insights on mobile development. Very interesting for
                    all of you developers out there as you all joined in with your ideas.
                </p>
            </a>
        </div>

    </div>

    <div class="panel panel-default bk-widget bk-bd-off bk-mg-off-t bk-rd-off">

        <h4 class="bk-mg-off" role="tab" id="headingTwob">
            <a data-toggle="collapse" data-parent="#accordionb" href="#collapseTwob" aria-expanded="false" aria-controls="collapseTwob"
               class="collapsed panel-heading bk-block bk-bg-primary bk-bg-darken bk-fg-white bk-rd-off">
                Collapsible Group Item #2
            </a>
        </h4>

        <div id="collapseTwob" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwob">
            <a href="javascript:" class="panel-body bk-block bk-bg-white bk-bg-lighten bk-fg-primary bk-fg-darken">
                <div class="pull-left bk-mg-r-10">
                    <div class="bk-round bk-bd-off bk-bg-primary bk-bg-darken bk-icon bk-icon-2x bk-icon-default bk-fg-white">
                        <i class="fa fa-cogs fa-2x"></i>
                    </div>
                </div>
                <p class="bk-mg-off-b">
                    Our dashboard has been updated to have better access and to allow on the fly editing. Read more about it on
                    our daily mailing journal and do not hesitate to let us know what you think.
                </p>
            </a>
        </div>
    </div>

    <div class="panel panel-default bk-widget bk-bd-off bk-mg-off-t bk-rd-off-t">

        <h4 class="bk-mg-off" role="tab" id="headingThreeb">
            <a data-toggle="collapse" data-parent="#accordionb" href="#collapseThreeb" aria-expanded="false" aria-controls="collapseThreeb"
               class="collapsed panel-heading bk-block bk-bg-gray bk-bg-darken bk-fg-white bk-rd-off-t">
                Collapsible Group Item #3
            </a>
        </h4>

        <div id="collapseThreeb" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeb">
            <a href="javascript:" class="panel-body bk-block bk-bg-white bk-bg-lighten bk-fg-gray bk-fg-darken">
                <div class="pull-left bk-mg-r-10">
                    <div class="bk-round bk-bg-gray bk-bg-darken bk-bd-off bk-icon bk-icon-2x bk-icon-default bk-fg-white">
                        <i class="fa fa-umbrella fa-2x"></i>
                    </div>
                </div>
                <p class="bk-mg-off-b">
                    The C# development team has completed their last sprint for their project and are celebrating with some champagne! Join them on floor 3
                    in the dining hall.
                </p>
            </a>
        </div>
    </div>
</div>