Accordions and Tabs
Updated 4 months ago
Accordion #
An Accordion Element is used to show multiple content sections. It is used to make the content dynamic, hiding and showing elements. Accordion as a UI element is a vertically stacked list of items such as text labels or thumbnails. Each element can be expanded to show the content associated with that element. An Accordion Element is usable without JavaScript. It is available in:
- WPBakery Builder;
- Live Builder.
Used together with the elements Tabs, Tour.
General settings #
Turn ON/OFF options (checkboxes):
- Allow several sections to be opened at the same time — if this option is selected, several sections will be opened at the same time. Otherwise, if one section will be opened, the previous will be closed
- Scroll to the beginning of the section when opening — the section will be positioned at the browser window top after opening
- Remove left and right indents — ON/OFF checkbox allows to remove idents from the left or right side in tabs content
- Add FAQ structured data markup — correctly marked up FAQ pages may be eligible to have a rich result on Google Search and an Action on the Google Assistant, which can help your site reach the right users.
- Title Alignment — set title alignment as "Center" or "Default"
- Title Size — set inherit or custom title size
- Title HTML tag — select HTML tag for the section title (div, p, span, headers h1-h6)
- Control Icon — select the control icon ("None", "Chevron", "Plus", "Triangle")
- Control Position — select the control position "Before title" or "After title"
Section settings #
Accordion sections are a part of the element. It is similar to row and column. Click the title to expand/collapse content that is divided into logical sections.
- Title — set section title
- Link — set link: select URL or add a custom link for the tab title
- Show this section open — ON/OFF checkbox, on initial page load this section will be shown open
- Stretch this section content to the full available area — set the section to be stretched to the full available area
- Icon — show an icon near the title
- Icon Position — select the icon position "Before title" or "After title"
Design settings #
All Design settings are the same for all elements. Read the article.
Tabs #
Tabs Element allows to show a tabbed content. This is a container element, which allows to add any elements (except other containers) inside itself. It can have several inner sections, every section is shown via the relevant tab. This element is available in:
- WPBakery Page Builder
- Live Builder
Tabs settings #
- Style — set different tab's styles as "Default", "Simple", "Simple 2", "Simple 3", "Switch", "Switch 2", "Switch 3", "Modern", "Trendy", "Timeline", "Timeline 2"
- Alignment — set "Center", "Default" or tab's "Justify" alignment
- Switch sections — set a between "On click" or "On hover" action
- Font — set a font for tabs
- Font Weight — set a font weight for tabs ("Default", "100 thin", "200 extra-light", "300 light", "400 normal", "500 medium", "600 semi-bold", "700 bold", "800 extra-bold", "900 ultra-bold")
- Text Transform — set a text transform ("Default", "None", "UPPERCASE", "lowercase", "Capitalize")
- Font Size — set a font size for tabs
- Line height — set a line height for tabs
Accordion settings #
By default, every Tabs element transforms into the Accordion, when its container width is not enough to show all tabs in one line.
- Transform to Accordion at the screen width — set a screen width with pixels. Leave empty to transform automatically based on the total width of the tabs.
- Scroll to the beginning of the section when opening — set scrolling to the open section
- Remove left and right indents — set remove idents left or right side
- Title Alignment — set title alignment as "Center" or "Default"
- Title HTML tag — HTML tags are allowed (div, p, span, headers h1-h6)
- Control Icon — select the control icon ("None", "Chevron", "Plus", "Triangle")
- Control Position — select the control position
Design settings #
All Design settings are the same for all elements. Read the article.
Vertical Tabs (Tour) #
Tour Element is used to create vertical tabs, where you can place the necessary elements. It is available in:
- WPBakery Builder;
- Live Builder.
Used together with the element Accordion.
Tabs settings #
- Style — set different tab's styles as "Default", "Simple", "Simple 2", "Simple 3", "Radio", "Radio 2", "Radio 3", "Modern", "Trendy"
- Switch sections — set switch sections as "On click" or "On hover"
- Position — set position "Left" or "Right"
- Width — set tab's width "Auto", "10%", "20%", "30%", "40%", "50%"
- Font — set custom font
- Font Weight — set custom weight font as "Default", "100 thin", "200 extra-light", "300 light", "400 normal", "500 medium", "600 semi-bold", "700 bold", "800 extra-bold", "900 ultra-bold"
- Text Transform — set custom text transform "Default", "None", "UPPERCASE", "lowercase", "Capitalize"
- Font Size — set a custom font size (examples: 16px, 1.2rem, max( 1rem, 1vw ), 1em by default)
- Line height — set a custom line height (examples: 28px, 1.7)
Accordion settings #
- Title Alignment — set title alignment as "Default", "Center"
- Transform to Accordion at the screen width — set a screen width with pixels. Examples: 300px, 768px. Leave empty to transform automatically based on the total width of the tabs
- Scroll to the beginning of the section when opening — ON/OFF checkbox allows to set scrolling to the open section
- Remove left and right indents — ON/OFF checkbox allows to remove left and right indents on the tab's title background
- Title HTML tag — HTML tags are allowed (div, p, span, headers h1-h6, div by default)
- Control Position — set control position "Before title" or "After title"
Design settings #
All Design settings are the same for all elements. Read the article.