Example

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

    <p>
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false"
           aria-controls="collapseExample">
            Link with href
        </a>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample"
                aria-expanded="false" aria-controls="collapseExample">
            Button with data-target
        </button>
    </p>
    <div class="collapse" id="collapseExample">
        <div class="card card-block">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
            proident.
        </div>
    </div>
    

Accordion example

Using the card component, you can extend the default collapse behavior to create an accordion.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.


    <div id="accordion" role="tablist">
        <div class="card">
            <div class="card-header" role="tab" id="headingOne">
                <h5 class="mb-0">
                    <a data-toggle="collapse" href="#collapseOne" aria-expanded="true"
                       aria-controls="collapseOne">
                        Collapsible Group Item #1
                    </a>
                </h5>
            </div>

            <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne"
                 data-parent="#accordion">
                <div class="card-block">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
                    squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
                    quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
                    squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
                    craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                    butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
                    nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" role="tab" id="headingTwo">
                <h5 class="mb-0">
                    <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false"
                       aria-controls="collapseTwo">
                        Collapsible Group Item #2
                    </a>
                </h5>
            </div>
            <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"
                 data-parent="#accordion">
                <div class="card-block">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
                    squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
                    quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
                    squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
                    craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                    butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
                    nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" role="tab" id="headingThree">
                <h5 class="mb-0">
                    <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false"
                       aria-controls="collapseThree">
                        Collapsible Group Item #3
                    </a>
                </h5>
            </div>
            <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"
                 data-parent="#accordion">
                <div class="card-block">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
                    squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
                    quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
                    squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
                    craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                    butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
                    nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
    </div>
    

You can also create accordions with custom markup. Add the data-children attribute and specify a set of sibling elements to toggle (e.g., .item). Then, use the same attributes and classes as shown above for connectinh toggles to their associated content.

Toggle item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.

Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


    <div id="exampleAccordion" data-children=".item">
        <div class="item">
            <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1"
               aria-expanded="true"
               aria-controls="exampleAccordion1">
                Toggle item
            </a>
            <div id="exampleAccordion1" class="collapse show" role="tabpanel">
                <p class="mb-3">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non
                    vestibulum
                    scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh
                    quis
                    ornare.
                </p>
            </div>
        </div>
        <div class="item">
            <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion2"
               aria-expanded="false"
               aria-controls="exampleAccordion2">
                Toggle item 2
            </a>
            <div id="exampleAccordion2" class="collapse" role="tabpanel">
                <p class="mb-3">
                    Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque
                    habitant
                    morbi
                    tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec dui
                    turpis.
                    Orci
                    varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </p>
            </div>
        </div>
    </div>
    
TODAY
Saturday
1 th Jan
Events

Group Meeting

In 32 Minutes, Room 1B

Public Beta Release

11:00 PM

Dinner with David

17:30 PM

Q&A Session

20:30 PM

Notes

Best songs to listen while working

Last edit: May 8th, 2015

Useful subreddits

Last edit: January 12th, 2015

Quick Settings

Notifications

Cloud Sync

Retro Thrusters