Tabs and Panels (Accordions) are popular web elements used in frameworks such as Bootstrap, they are useful to show hidden contents and their use is straightforward. Some notes for their use:

• URL History for Tabs and Accordions: this feature is available from Uncode 1.6. You can activate the URL History permalink option so visitors can navigate from an external page directly to the specific tab panel or accordion. To do this simply enable the History option in the module settings and define a specific Slug for any tab or panel if needed, screenshot.
• Closed Panels (Accordions) on load: if you need your accordion is closed on page load please apply the value "0" to the Active Section option. At the same, you can use this option to specify another panel opened on page load, screenshot.

Multiple Tabs and Panels on the same page

If you need to create a page with more Tabs or Panels modules you have 2 methods to avoid the modules conflict with each other:

1. Use the URL History options so your elements get a different and unique Slug.
2. Create the first Tab or Panel, save the page, then create the second Tab or Panel (not duplicate the first but create from new after you have saved the page).
3. Please note that unfortunately, it is not possible to clone a Tab element via Frontend Editor or duplicate it with the Clipboard plugin.

As of version 2.8.0 of Uncode, new options for customizing Tabs (horizontal and vertical) and Accordions have been added. Tabs and Accordions are user interface elements commonly used on websites to organize and present content in a compact and user-friendly way. You can create helpful new configurations for your projects with the new options. Here are something of the most important options:

Tabs

• Scroll Target: Define the History scroll target on page load.
• Special Events: Use for special situations, such as if a Posts or Media Gallery module is inside or other modules require a Resize event.
• Remove Lazy Loading: Remove default lazy loading for images in not active tabs.
• Remove Animation: Remove the default animation, which is helpful for independently animating internal elements.
• Switcher Style: Set the Switcher style.
• Indicator Animated: Activates the animation on the indicator highlighting the active tab.
• Typography: Set the font of tab titles. You can set the default, inherit from the column, or a custom typography.
• Tabs Position (Vertical Tabs): Reverses the position between Tabs and Content.
• Tabs Layout (Vertical Tabs): Set a custom width relative to the main grid for Tabs.
• Tabs Tablet Breakpoint (Vertical Tabs): Anticipates on Tablet the default breakpoint layout.

Accordions

• Scroll Target: Define the History scroll target on page load.
• Opened Panels: Activate this option not to close the other panels. NB. Suggested for when there is a lot of content inside Panels.
• Special Events: Use for special situations, such as if a Posts or Media Gallery module is inside or other modules require a Resize event.
• Remove Lazy Loading: Remove default lazy loading for images in not active tabs.
• Titles Typography: Set the font of panel titles. You can set the default, inherit from the column, or a custom typography.
• Custom Padding: Set custom padding.
• Active Panel Background: Set the background for the active panel.

Inner Row element inside Tabs and Panels

NB: it's not possible to insert an Uncode WPBakery Page Builder Inner Row element inside these modules, and you cannot insert Tabs inside an Accordion (and vice versa). These are limits of the WPBakery Page Builder itself.

Tabs & Panels with complex JavaScript configurations 

If you plan to have JavaScript elements like the Posts or Media Gallery modules within your Tabs or Panels, or animations of the following modules are not triggered properly, please follow:

• JavaScript modules inside Tabs and Panels
• Modules with animations after Tabs and Panels