Generic Toggles

Flexible and generic component that utilizes a handful of classes and data attributes for easy toggle behavior of any content.

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

• .collapse hides content
• .collapsing is applied during transitions
• .collapse.in shows content

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.

The example uses an optional .toggle-more class. This class is a generic class that toggles a .active class on the clicked element. This can be used as a hook to change icons to show opened and closed states.

Example:

Toggle with Link Toggle With Button

Source Code:

Toggle with Link 


Toggle With Button 


    Collapsed content here...