Skip to content

Elements:Collapse / Accordions

The collapse plugin allows content to be "collapsed" and hidden and a trigger to show it like with an accordion effect.

Basic Example

The trigger element should have a data-toggle="collapse" attribute and either a href or data-target attribute pointing to the target element it should control.

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.

Multiple targets

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

Accordions

By combining the collapse functionality with the cards component you can create flexibility accordions.

Default

Enim praesent tamen. Brevitas eros hos luctus macto obruo quis ullamcorper. Acsi erat nisl nostrud paratus.
Autem causa ideo inhibeo mos nimis. Dolor facilisis humo minim odio oppeto suscipit torqueo turpis.
Abigo augue dolor nobis nunc praesent qui turpis velit wisi. Autem melior sino validus. Abdo aliquam cui imputo jus lenis quadrum utrum validus wisi.

List Style

Duis eligo ille persto roto. Antehabeo eros facilisis interdico luptatum nulla quidne secundum suscipere vicis.
Paulatim quadrum utinam vulpes. Feugiat genitus nostrud qui quidem. Humo os qui tum wisi. In utinam verto.
Ad cui nunc valetudo. Accumsan gemino nutus persto. Et iustum nunc pneum ullamcorper vereor. Blandit duis exerci nisl nostrud oppeto pala ut volutpat vulputate.

Accordion Scroll To Top

Add the attribute data-accordion-focus to the card-accordion element to have the page scroll to the top of the accordion when the accordion items are clicked.

Appellatio consequat saepius. Blandit eligo laoreet macto molior plaga ratis rusticus ullamcorper zelus. Cogo eum exputo jumentum paratus quidne rusticus tego.
Ibidem jumentum ludus pagus utinam. Abluo incassum sino. Cogo proprius veniam. Autem illum jus pala premo quae quidem scisco.
Facilisis immitto inhibeo jumentum letalis mauris molior refoveo sed wisi. Feugiat praesent venio. Augue eum exerci inhibeo jus nisl nostrud ratis sagaciter.

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page