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 lookBottom margin
You can set different bottom margins for different elements / shortcodesClone shortcode
Once you are happy with the looks of your shortcode, you can clone it and use it somewhere elseDrag & drop shortcode
You can move your shortcode to any column on the page by dragging that shortcode