sleek-dashboard
Version:
Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com
236 lines (228 loc) • 12.1 kB
HTML
---
layout: default
title: "Collapse - Sleek Admin Dashboard Template"
parent: "components"
sub_parent: "components"
activePage: "collapse"
plugins: []
---
<div class="breadcrumb-wrapper">
<h1>Collapse</h1>
{% include breadcrumb.htm %}
</div>
<div class="row">
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Accordion Default</h2>
</div>
<div class="card-body">
<p class="mb-5">Using the card component, you can extend the default collapse behavior to create an accordion. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/collapse/#accordion-example" target="_blank">
more details.</a></p>
<div id="accordion" class="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Hat Black Suits
</button>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.enim
ad minim veniam quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
aria-controls="collapseTwo">
Toddler Shoes, Gucci Watch
</button>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.enim
ad minim veniam quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Hat Black Suits
</button>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.enim
ad minim veniam quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Accordion Shadow</h2>
</div>
<div class="card-body">
<p class="mb-5"> For accordion shadow add class <code> .accordion-shadow </code> to <code> <div id="accordion2" class="accordion"> </code> </p>
<div id="accordion2" class="accordion accordion-shadow">
<div class="card">
<div class="card-header" id="headingFour">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
Hat Black Suits
</button>
</div>
<div id="collapseFour" class="collapse show" aria-labelledby="headingFour" data-parent="#accordion2">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.enim
ad minim veniam quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFive">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false"
aria-controls="collapseFive">
Toddler Shoes, Gucci Watch
</button>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion2">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.enim
ad minim veniam quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingSix">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false"
aria-controls="collapseSix">
Hat Black Suits
</button>
</div>
<div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordion2">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.enim
ad minim veniam quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Accordion Bordered</h2>
</div>
<div class="card-body">
<p class="mb-5"> For accordion shadow add class <code> .accordion-bordered </code> to <code> <div id="accordion3" class="accordion"> </code>
</p>
<div id="accordion3" class="accordion accordion-bordered ">
<div class="card">
<div class="card-header" id="heading1">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
Hat Black Suits
</button>
</div>
<div id="collapse1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion3">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.enim
ad minim veniam quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse2" aria-expanded="false"
aria-controls="collapse2">
Toddler Shoes, Gucci Watch
</button>
</div>
<div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion3">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.enim
ad minim veniam quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading3">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse3" aria-expanded="false"
aria-controls="collapse3">
Hat Black Suits
</button>
</div>
<div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordion3">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.enim
ad minim veniam quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Accordion Header bottom border</h2>
</div>
<div class="card-body">
<p class="mb-5"> For accordion shadow add class <code> .accordion-header-border-bottom </code> to <code> <div id="accordion4" class="accordion"> </code>
</p>
<div id="accordion4" class="accordion accordion-header-border-bottom ">
<div class="card">
<div class="card-header" id="heading4">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse4" aria-expanded="true" aria-controls="collapse4">
Hat Black Suits
</button>
</div>
<div id="collapse4" class="collapse show" aria-labelledby="heading4" data-parent="#accordion4">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.enim
ad minim veniam quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading5">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse5" aria-expanded="false"
aria-controls="collapse5">
Toddler Shoes, Gucci Watch
</button>
</div>
<div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordion4">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.enim
ad minim veniam quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading6">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse6" aria-expanded="false"
aria-controls="collapse6">
Hat Black Suits
</button>
</div>
<div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordion4">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.enim
ad minim veniam quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>