JetTabs

Accordion

Accordion widget is the perfect tool for adding content templates built with Elementor to the Accordion items, which can be structured according to Your needs and styled up.

Content

Items

• Add Item - click Add Item button to add the new toggle item to the Accordion block.
• Active - enable this option to make the toggle active in the Accordion.
• Icon - here you can set the icon to be used as the major item icon.
• Active Icon - select one of the icons from the dropdown in order to set it as the Active toggle item.
• Label - type in the preferable name for the item toggle to use.
• Choose Template - select one of the existing previously saved templates to place inside the Accordion toggle.

Settings

• Collapsible - enable Collapsible option in order to make the Accordion items collapsible.

Style



Accordion Container

• Background Type — in this block you can choose, whether you want to use classic or gradient type for the Accordion container. The customization options vary for each type.

  Classic Background Type

  • Color — here you can set background color for the Accordion container using color picker tool.
  • Image — here you can choose the image you want to use as a background. Select the image from the media library or upload it to define it as a background in this block. When the image is uploaded, you’ll be able to define its position, alignment, turn on repeat and set the necessary size.
  • Opacity — here you can define the value for the opacity of the background.

  Gradient Background Type

  • Color — here you can set background color for the Accordion container using color picker tool.
  • Location — here you can define the proportion for the first color in the gradient background.
  • Second Color — here you can set the second color to use in the gradient background.
  • Location — here you can define the proportion for the second color in the gradient background.
  • Type — define, if you want to use linear or radial type of the gradient.
  • Angle — in this block you can set the angle for the gradient (in degrees).
  • Opacity — here you can change background opacity, where 1 is 100% opacity, and 0 — is 0% opacity.
• Border Type - here you can define the type of the border you need to use for the element.
• Width - here you can set the border width value in px.
• Color - use the color picker tool to select the needed color for the border.
• Border Radius - here you can set the border radius to make the angles more smooth and round.
• Box Shadow - here you can apply the shadow for the Accordion container and change the shadow’s settings, such as color, blur, spread and position.
• Padding - here you can set the preferable custom padding. Fill in the values for the top, bottom, right and left padding in pixels to apply your custom padding.

Toggle

• Padding - here you can set the preferable custom padding. Fill in the values for the top, bottom, right and left padding in pixels to apply your custom padding.
• Margin - input the values for the margins in the required fields.
• Background Type - in this block you can choose, whether you want to use classic or gradient type for the module. The customization options vary for each type. The settings are similar to the common background type settings for other JetTabs widgets.
• Border Type - here you can define the type of the border you need to use for the element.
• Width - here you can set the border width value in px.
• Color - use the color picker tool to select the needed color for the border.
• Border Radius - here you can set the border radius to make the angles more smooth and round.
• Box Shadow - here you can apply the shadow for the Accordion toggle and change the shadow’s settings, such as color, blur, spread and position.

Toggle Control

Switch between Normal, Hover and Active mode to customize Toggle Control according to your needs when the elements are active, or in the normal state.

• Text Color - here you can change the first part of the text color using color picker.
• Typography - turn the option on to view the typography settings. The typography settings are similar for all the JetTabs widgets and blocks.
• Size — define the font size you want to use.
• Family — here you can set the preferable font family.
• Weight — in this block you can select the suitable font weight.
• Transform — here you can choose from the dropdown menu, if you want the text to be shown in uppercase, lowercase, capitalize or normal way.
• Style — in this block you can choose from the dropdown menu the style for the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
• Line Height — in this field you can set the height of the text line.
• Letter Spacing — here you can set the space between letters.
• Icon - click the icon options block to view all of them and change the icon color, background, etc.
• Color - here you can change the color of the icon using Color Picker tool.
• Background Type - here you can select the needed icon background type (the settings are similar to the ones for the other JetTabs widgets blocks background types).
• Icon Size - here you can select the icon size in order for icon to fit. The settings are responsive.
• Box Size - here you can select the needed icon box size. The settings are responsive.
• Border Type - here you can select the needed type of the border to use for the icon box. You’ll also be able to set the border color, width and border radius.
• Box Shadow - here you can apply a shadow for the icon box.
• Background Type - in this block you can choose, whether you want to use classic or gradient type for the toggle. The customization options vary for each type. The settings are similar to the common background type settings for other JetTabs widgets.
• Image - here you can select an image from the media library or upload one to use as the toggle background.
• Border Type - here you can select the needed type of the border to use for the toggle block. You’ll also be able to set the border color, width and border radius.
• Padding - here you can set the preferable custom padding. Fill in the values for the top, bottom, right and left padding in pixels to apply your custom padding.
• Margin - input the values for the margins in the required fields.
• Border Radius - here you can set the border radius to make the angles more smooth and round.
• Box Shadow - here you can apply the shadow for the toggle and change the shadow’s settings, such as color, blur, spread and position.

Toggle Content

• Background Type - in this block you can choose, whether you want to use classic or gradient type for the toggle content. The customization options vary for each type. The settings are similar to the common background type settings for other JetTabs widgets.
• Margin - input the values for the margins in the required fields.
• Padding - here you can set the preferable custom padding. Fill in the values for the top, bottom, right and left padding in pixels to apply your custom padding.
• Border Type - here you can select the needed type of the border to use for the toggle content block.
• Border Radius - here you can set the border radius to make the angles more smooth and round.
• Box Shadow - here you can apply the shadow for the toggle content and change the shadow’s settings, such as color, blur, spread and position.

Advanced



The Advanced settings block provides opportunity to change the elements style, background and borders. The settings are similar for all of the JetTabs widgets.

Element Style<

• Margin — in this block you can input the values (in pixels) to define the margins for the module you're customizing.
• Padding— here you can set the custom padding for the widget. Fill in the values for the top, bottom, right and left padding in pixels to apply your custom padding.
• Z-index— input the value of the z-index to use it for the widget.
• Entrance Animation- choose from the dropdown menu one of the styles for the widget to appear on the page.
• Animation Duration — here you can define the time during which the widget will appear on the page. It can be normal, slow or fast. Choose the one you need from the dropdown menu.
• Animation Delay (ms) — input the value (in ms) for the animation delay.
• CSS Classes — here you can define the CSS class for the widget.

Background

Here you can switch from customizing Normal to Hover background style settings. Just click on the button Hover to proceed to customizing hover elements.

• Background Type — in this block you can choose, whether you want to use classic or gradient type for the module background. The customization options vary for each type.

Classic Background Type

• Color — here you can set background color for the background using color picker tool.
• Image — here you can choose the image you want to use as a background. Select the image from the media library or upload it to define it as a background in this block. When the image is uploaded, you’ll be able to define its position, alignment, turn on repeat and set the necessary size.

Gradient Background Type

• Color — here you can set background color for the module using color picker tool.
• Location — here you can define the proportion for the first color in the gradient background.
• Second Color — here you can set the second color to use in the gradient background.
• Location — here you can define the proportion for the second color in the gradient background.
• Type — define, if you want to use linear or radial type of the gradient.
• Angle — in this block you can set the angle for the gradient (in degrees).

Border

Here you can switch from customizing Normal to Hover border style settings. Just click on the button Hover to proceed to customizing hover elements.

Border Type — here you can select the type of the border from the dropdown menu. Here is the list of available border types:

• none;
• solid;
• doubled;
• dotted;
• dashed.

Border Radius — here you can select the radius for the applied border (in pixels).

Box Shadow — enable this option if you want to access the shadow advanced settings for this module, and need to apply shadow for it.

Shadow Settings:

• color — here you can set the color for the the shadow (use color picker tool to do it);
• blur — in this block you can define the blur settings for the shadow;
• spread — here you can set how large the shadow will be;
• horizontal — here you can move the shadow horizontally (from right to left);
• vertical — here you can move the shadow vertically (from top to bottom);
• position — here you need to choose, whether you want the shadow to outline the module, or to be inset.

Image Accordion

Image Accordion widget is specially cut for building creative and eye-catching content, making it possible to add images into accordion items and show them up using attractive effects.

Content

Items

• Add Item - click Add Item button to add more items to Image Accordion.

• Image - select the image you want to use for the Image Accordion item from the media library or upload it from your hard drive.
• Title - here you need to specify the title for the image.
• Description - in this block you need to define the description text for the image.
• Button Text - here you can set the text to be shown as the button label.
• Link - in this field you can define the link to use it for the button. You can also define, if the link opens in new window, or has nofollow value.

Settings

• Orientation - here you can change the Image Accordion orientation to vertical or horizontal.
• Active Size (%) - here you can change the size of the active position of the accordion item in percents (it shows the percentage which the active image occupies of the full Image Accordion block).
• Animation Duration - here you can set the needed animation duration in ms.
• Easing - here you can select the type of easing to apply to the Image Accordion items (Circ, Back, Expo, Cubic, Quint, Sine).

Style

Container

• Height (px) - here you can set the height of the Image Accordion widget in px and make it responsive.
• Background Type - in this block you can choose, whether you want to use classic or gradient type for Image Accordion. The customization options vary for each type. The settings are similar to the common background type settings for other JetTabs widgets.
• Border Type - here you can select the needed type of the border to use for the Image Accordion.
• Border Radius - here you can set the border radius to make the angles more smooth and round.
• Box Shadow - here you can apply the shadow for the Image Accordion widget and change the shadow’s settings, such as color, blur, spread and position.
• Padding - here you can set the preferable custom padding. Fill in the values for the top, bottom, right and left padding in pixels to apply your custom padding.

Item

• Item Gutter - here you can set the space gutter between the items shown in accordion, and make it responsive.
• Background Type - in this block you can choose, whether you want to use classic or gradient type for the item. The customization options vary for each type. The settings are similar to the common background type settings for other JetTabs widgets.
• Border Type - here you can select the needed type of the border to use for the item.
• Border Radius - here you can set the border radius to make the angles more smooth and round.
• Box Shadow - here you can apply the shadow for the Image Accordion item and change the shadow’s settings, such as color, blur, spread and position.

Content

• Background Type - in this block you can choose, whether you want to use classic or gradient type for the content. The customization options vary for each type. The settings are similar to the common background type settings for other JetTabs widgets.
• Padding - here you can set the preferable custom padding. Fill in the values for the top, bottom, right and left padding in pixels to apply your custom padding.
• Text Alignment - here you can set the right, left and centered alignment for the textual content.

Title

• Color - here you can set the color to use it for the item title.
• Typography - turn the option on to view the typography settings. The typography settings are similar for all the JetTabs widgets and blocks.
• Padding - here you can set the preferable custom padding. Fill in the values for the top, bottom, right and left padding in pixels to apply your custom padding.
• Margin - input the values for the margins in the required fields.
• Alignment - here you can set the alignment to use it for the title (center, right, left).

Description

• Color - here you can set the color to use it for the item description text.
• Typography - turn the option on to view the typography settings. The typography settings are similar for all the JetTabs widgets and blocks.
• Padding - here you can set the preferable custom padding. Fill in the values for the top, bottom, right and left padding in pixels to apply your custom padding.
• Margin - input the values for the margins in the required fields.
• Alignment - here you can set the alignment to use it for the description text (center, right, left).

Action Button

• Alignment - here you need to select the button alignment (left, right, center) and make it responsive.

Switch between Normal or Hover mode to customize the button according to your needs when the button is active, or in the normal state.

• Background Color - here you can set the suitable color to use ir for the button background.
• Text Color - here you should select the color to apply it to the button label text.
• Typography - turn the option on to view the typography settings. The typography settings are similar for all the JetTabs widgets and blocks.
• Padding - here you can set the preferable custom padding. Fill in the values for the top, bottom, right and left padding in pixels to apply your custom padding.
• Margin - input the values for the margins in the required fields.
• Border Radius - here you can set the border radius to make the angles more smooth and round.
• Border Type - here you can select the needed type of the border to use for the item.
• Box Shadow - here you can apply the shadow for the button and change the shadow’s settings, such as color, blur, spread and position.

Content Order and Alignment

In this block you can change the order in which the title, description and button are shown.

Advanced

The Advanced settings block provides opportunity to change the elements style, background and borders. The settings are similar for all of the JetTabs widgets.

Feel free to check the detailed description of these settings in the Accordion widget block.