Expanding and Collapsing Elements

Click on a trigger to show and hide another element.

Use class collapse on the collapsible element. This will thide the element.
To show the the element by default, add class in to the collapse class.For all options see the documentation

Trigger
This is a simple example of expanding and collapsing individual element via data attribute. Click on the Trigger Button button to see the effect.

As a trigger you can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.
Sub content

Collapsible elements can be usefull to show sub content to the user.
Style the elemet by adding a color name as a class, or the class theme

(305) 444 1234

Mobile

(706) 888 1234

Work

chris@example.com

Personal

chris@work.com

Work

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nobis, incidunt, minus, natus voluptates doloribus in voluptatum qui perspiciatis dignissimos cupiditate perferendis! Tempore, ad vitae eius ipsum similique asperiores officia. Lorem ipsum dolor sit amet.

Accordion

Click on the heading text to expand or collapse accordion panels.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

Popout

Click on the heading text to expand or collapse accordion panels.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

© 2016 YourApp