Skip to main content

Accordions Shortcodes

Accordions are great to show the content of your website and can be set in different styles with Visual Composer Accordion shortcodes.

[vc_separator color=”custom” gap=”tall” gradient=”yes”]

Default

[vc_accordion][vc_accordion_tab title=”Accordion Title 1″]

Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 2″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 3″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][/vc_accordion][vc_empty_space height=”22px”][vc_separator color=”custom” gap=”tall” gradient=”yes”]

Colors

[vc_accordion type=”custom” skin=”primary”][vc_accordion_tab title=”Accordion Title 1″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 2″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 3″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][/vc_accordion]
[vc_accordion type=”custom” skin=”secondary”][vc_accordion_tab title=”Accordion Title 1″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 2″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 3″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][/vc_accordion]
[vc_accordion type=”custom” skin=”tertiary”][vc_accordion_tab title=”Accordion Title 1″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 2″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 3″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][/vc_accordion]
[vc_accordion type=”custom” skin=”quaternary”][vc_accordion_tab title=”Accordion Title 1″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 2″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 3″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][/vc_accordion]
[vc_empty_space height=”22px”][vc_separator color=”custom” gap=”tall” gradient=”yes”]

Small

[vc_accordion size=”panel-group-sm”][vc_accordion_tab title=”Accordion Title 1″]

Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 2″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 3″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][/vc_accordion]

Default

[vc_accordion][vc_accordion_tab title=”Accordion Title 1″]

Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 2″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 3″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][/vc_accordion]

Large

[vc_accordion size=”panel-group-lg”][vc_accordion_tab title=”Accordion Title 1″]

Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.

Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 2″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 3″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][/vc_accordion]
[vc_empty_space height=”22px”][vc_separator color=”custom” gap=”tall” gradient=”yes”]

With Icons

[vc_accordion][vc_accordion_tab title=”Accordion Title 1″ show_icon=”yes” icon=”fa fa-users”]

Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 2″ show_icon=”yes” icon=”fa fa-film”]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 3″ show_icon=”yes” icon=”fa fa-bars”]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][/vc_accordion]

Without Background

[vc_accordion type=”without-bg”][vc_accordion_tab title=”Accordion Title 1″]

Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 2″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 3″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][/vc_accordion]

Without Borders and Background

[vc_accordion type=”without-bg without-borders”][vc_accordion_tab title=”Accordion Title 1″]

Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 2″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][vc_accordion_tab title=”Accordion Title 3″]

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

[/vc_accordion_tab][/vc_accordion]