The tabs shortcode is one of the Jupiter shortcodes that allows you to show a tabbed-based view of your content. You can also select the style and set the tab orientation as you wish.
In this article, we’ll explain how to configure the tabs shortcode.
To see the Tabs shortcode in action, check out the demo page.
Displaying the Tabs Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| Title | Adds a title for the tabs. |
| Mobile Friendly Tabs? | Use this option to decide whether this shortcode can be viewed when visiting the site from mobile devices. Our recommendation is to change the shortcode behavior and stack all shortcode text as normal content. Available options are: Yes Please! and No! |
Configuring the Tabs Settings
After you’ve added the tabs shortcode, a pop-up window will appear where you can configure the options. Below is a detailed description of each option for the tabs shortcode.
Configuring Each Tab Separately
Each tab has a pencil icon to show the options related to the tab. Options included for each individual tab are as follows:
| Setting | Description |
|---|---|
| Title | Sets the title of the tab. This option is different from the main shortcode title setting. It is for each individual tab and can be set for each one separately. |
| Add Icon Class Name (optional) | Adds the icon class name that you want to have in the tab section of the shortcode next to the title. To see a graphical representation of the icons and a reference to their class names, go to Main Dashboard Menu > Jupiter > Icons Library. |
Configuring the Tabs Styling
To select the style or set the background color of the tabs you’ll need edit the following options. Each option has a description which you can find below:
| Setting | Description |
|---|---|
| Style | Sets the style of the tab shown on the website. Available options are: Default and Simple. |
| Orientation | Sets the orientation of the tabs shortcode presentation. This option works only for the Default style. Available options are: Horizontal and Vertical. |
| Container Background Color | Sets the container background color of the shortcode which contains the main content for each tab. |
Adding an Extra Class Name
The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a stylesheet or JavaScript file.
You can read the Adding a custom CSS class to a shortcode article for further explanation.
