Accordion shortcode

Displays an accordion element to your web page. Frontend builder allows you to fully customize your accordion by changing the layout, color, size, and shape of the item, in order to better incorporate it into your design.

Examples of the accordion shortcode usage

We tried to cover all the basic and
advanced uses for the accordion shortcode

A couple of examples of accordion styles, colors, and sizes.

Bucolic Ebullience

Mauris faucibus ac felis eget consectetur. Integer nec enim nec tortor pharetra ultricies. Maecenas vulputate placerat urna at hendrerit. Morbi eu varius nulla. Donec fringilla feugiat gravida. Nulla tempus semper magna, non eleifend leo congue ac. Integer ac egestas nisi, et vehicula ligula. Vestibulum tincidunt dignissim lobortis. Nulla tristique aliquet quam, et posuere felis luctus at.

Evocative Dalliance

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Ethereal Elision

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Furtive Incipient

Etiam vitae tincidunt magna, sit amet sagittis dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer tempor suscipit dolor, nec bibendum augue. Aenean nisi odio, euismod nec elementum eu, fringilla ac nulla.

Bucolic Ebullience

Mauris faucibus ac felis eget consectetur. Integer nec enim nec tortor pharetra ultricies. Maecenas vulputate placerat urna at hendrerit. Morbi eu varius nulla. Donec fringilla feugiat gravida. Nulla tempus semper magna, non eleifend leo congue ac. Integer ac egestas nisi, et vehicula ligula. Vestibulum tincidunt dignissim lobortis. Nulla tristique aliquet quam, et posuere felis luctus at.

Evocative Dalliance

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Ethereal Elision

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Furtive Incipient

Etiam vitae tincidunt magna, sit amet sagittis dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer tempor suscipit dolor, nec bibendum augue. Aenean nisi odio, euismod nec elementum eu, fringilla ac nulla.

Lydia Faulkner

UI DESIGNER
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Labyrinthine

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Mondegreen

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Onomatopoeia

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Quintessential

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sempiternal

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Tintinnabulation

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Susquehanna

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Susurrous

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Ratatouille

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Basic settings for accordion shortcode

Basic settings for your basic needs. Frontend builder gives the
user an option to create basic stuff with ease

Accordion style

There are seven different styles to Frontend Builder accordion shortcode: default, clean, squared, rounded, and their left and right variants.

Fixed height

This option sets the height of each accordion section equal to the height of the largest section.

Title colors

You can define a custom color of the title in default and active state using the color picker, or set the hex code manually.

Background color

You can define a custom color of the background using the color picker, or set the hex code manually.

Accordion title

Sets the title of the accordion section.

Image link

Set a link to an image to be shown in accordion section. You can set a link manually, or upload an image using the WordPress interface.

Text color

You can define a custom color of the text in default and hovered state using the color picker, or set the hex code manually.

Main color

You can set custom colors for background and accent in some of the styles using the color picker, or hex code.

Trigger colors

You can define a custom color of the triggers in default and active state using the color picker, or set the hex code manually.

Border color

You can define a custom color of the border using the color picker, or set the hex code manually.

Accordion content

You can display any kind of content in accordion section - including media and html code.

Accordion active

This option sets the selected accordion section to active by default.

Advanced settings for accordion shortcode

In case that you need something more creative and complex
Frontend builder has a set of advanced options to get you there

ID & Custom CSS

You can easily insert your own, custom CSS for that personalized look

Bottom margin

You can set different bottom margins for different elements / shortcodes

Clone shortcode

Once you are happy with the looks of your shortcode, you can clone it and use it somewhere else

Drag & drop shortcode

You can move your shortcode to any column on the page by dragging that shortcode

Animation

You can easily animate each shortcode with tons of different animation types

Animation delay

All animations appear only when the user scrolls to the specific shortcode, you can set the delay for that

Animation speed

You can manually change the speed of each animation for each element / shortcode

Animation group

By placing different shortcodes in a group, all shortcodes in that group will animate once the user scrolls to the first element in the group