Lexicon v1.0.32

Extending List Groups

Collapsible List Group

Create collapsible list groups with List Group and the Collapse module.

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...
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...
<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.

List Group Heading 
<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.

  • 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
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
    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>