Extending List Groups
Collapsible List Group
Create collapsible list groups with List Group and the Collapse module.
List Group Heading
List Group Heading
List Group Heading
Breve, french press, shop arabica white blue mountain shop foam acerbic wings extraction white, at iced irish french press rich fair trade rich aromatic whipped. To go variety spoon americano aged froth, milk cup cortado, white redeye cinnamon turkish...
Breve, french press, shop arabica white blue mountain shop foam acerbic wings extraction white, at iced irish french press rich fair trade rich aromatic whipped. To go variety spoon americano aged froth, milk cup cortado, white redeye cinnamon turkish...
Breve, french press, shop arabica white blue mountain shop foam acerbic wings extraction white, at iced irish french press rich fair trade rich aromatic whipped. To go variety spoon americano aged froth, milk cup cortado, white redeye cinnamon turkish...
<div class="list-group">
<a aria-expanded="false" class="collapsed list-group-heading" data-toggle="collapse" href="#listGroupCollapse4">
List Group Heading
<span class="list-group-collapse-icon"></span>
</a>
<div class="collapse" id="listGroupCollapse4">
<div class="list-group-item" style="padding: 24px 24px 30px">Breve, french press, shop arabica white blue mountain shop foam acerbic wings extraction white, at iced irish french press rich fair trade rich aromatic whipped. To go variety spoon americano aged froth, milk cup cortado, white redeye cinnamon turkish...</div>
</div>
<a aria-expanded="true" class="list-group-heading" data-toggle="collapse" href="#listGroupCollapse5">
List Group Heading
<span class="list-group-collapse-icon"></span>
</a>
<div class="collapse in" id="listGroupCollapse5">
<div class="list-group-item" style="padding: 24px 24px 30px">Breve, french press, shop arabica white blue mountain shop foam acerbic wings extraction white, at iced irish french press rich fair trade rich aromatic whipped. To go variety spoon americano aged froth, milk cup cortado, white redeye cinnamon turkish...</div>
</div>
<a aria-expanded="false" class="collapsed list-group-heading" data-toggle="collapse" href="#listGroupCollapse6">
List Group Heading
<span class="list-group-collapse-icon"></span>
</a>
<div class="collapse" id="listGroupCollapse6">
<div class="list-group-item"style="padding: 24px 24px 30px">Breve, french press, shop arabica white blue mountain shop foam acerbic wings extraction white, at iced irish french press rich fair trade rich aromatic whipped. To go variety spoon americano aged froth, milk cup cortado, white redeye cinnamon turkish...</div>
</div>
</div>
Collapsible Linked List Groups
Create collapsible lists of links with Linked List Group and the Collapse module.
<div class="list-group">
<a aria-expanded="false" class="collapsed list-group-heading" data-toggle="collapse" href="#listGroupCollapse1">List Group Heading</a>
<div class="collapse" id="listGroupCollapse1">
<a href="#" class="list-group-item">List Item 1</a>
<a href="#" class="list-group-item">List Item 2</a>
<a href="#" class="list-group-item">List Item 3</a>
<a href="#" class="list-group-item">List Item 4</a>
</div>
<a aria-expanded="true" class="list-group-heading" data-toggle="collapse" href="#listGroupCollapse2">List Group Heading</a>
<div class="collapse in" id="listGroupCollapse2">
<a href="#" class="list-group-item">List Item 1</a>
<a href="#" class="list-group-item">List Item 2</a>
<a href="#" class="list-group-item">List Item 3</a>
<a href="#" class="list-group-item">List Item 4</a>
</div>
<a aria-expanded="false" class="collapsed list-group-heading" data-toggle="collapse" href="#listGroupCollapse3">List Group Heading</a>
<div class="collapse" id="listGroupCollapse3">
<a href="#" class="list-group-item">List Item 1</a>
<a href="#" class="list-group-item">List Item 2</a>
<a href="#" class="list-group-item">List Item 3</a>
<a href="#" class="list-group-item">List Item 4</a>
</div>
</div>
Collapsible Tabular List Groups
Insert Tabular List Groups inside
.collapse
to create collapsible Tabular List Groups.
List Group Heading
List Group Heading
List Group Heading
-
Larry Bird the best power forward in Celtic's history.
Monica Bellucci
5 Folders 4 Entries
-
Karl Malone the best power forward in Jazz history.
Monica Bellucci
5 Folders 4 Entries
-
Larry Bird the best power forward in Celtic's history.
Monica Bellucci
5 Folders 4 Entries
-
Karl Malone the best power forward in Jazz history.
Monica Bellucci
5 Folders 4 Entries
-
Larry Bird the best power forward in Celtic's history.
Monica Bellucci
Approved -
Karl Malone the best power forward in Jazz history.
Monica Bellucci
Pending -
Dennis Rodman the best power forward in Bulls history.
Monica Bellucci
Draft -
LeBron James the best power forward in Heat history.
Monica Bellucci
Expired -
Tim Duncan the best power forward in Spurs' history.
Monica Bellucci
Scheduled -
Kevin Garnett the best power forward in Pistons' history.
Monica Bellucci
Rejected
<div class="list-group">
<a aria-expanded="false" class="collapsed list-group-heading" data-toggle="collapse" href="#tabularListGroupCollapse1">List Group Heading</a>
<div class="collapse" id="tabularListGroupCollapse1">
<ul class="tabular-list-group">
...
</ul>
</div>
<a aria-expanded="true" class="list-group-heading" data-toggle="collapse" href="#tabularListGroupCollapse2">List Group Heading</a>
<div class="collapse in" id="tabularListGroupCollapse2">
<ul class="tabular-list-group">
...
</ul>
</div>
<a aria-expanded="false" class="collapsed list-group-heading" data-toggle="collapse" href="#tabularListGroupCollapse3">List Group Heading</a>
<div class="collapse" id="tabularListGroupCollapse3">
<ul class="tabular-list-group">
...
</ul>
</div>
</div>