Advanced Accordion

The JupiterX Advanced Accordion widget enables users to toggle the display of content within a collapsible, vertically stacked panel. This widget is particularly useful for organizing content in a compact, accessible format, allowing for a clean and efficient presentation of information on web pages. Its functionality in controlling the visibility of content makes it ideal for FAQs, product descriptions, or any section where space-saving and clarity are paramount.

Content Tab

Items

• Active: Toggle this to 'Yes' to make the section active by default on page load.
• Label: Enter the title for the accordion section.
• Content Type: Choose the type of content you want to use. Options include 'Editor' for a standard text editor or 'Template' for a pre-designed template.
• Content: Add your content using the WordPress editor. Alternatively, you can choose to use a template you have already created as the content for your accordion item.

For each accordion item, you have additional options:

• Icon: Select an icon to display alongside the accordion label.
• Advanced: Set a custom CSS ID for the item to style it individually using CSS.

Settings

• Collapsible: If set to 'Yes', allows multiple sections to be expanded at the same time.
• Effect: Choose an animation effect for the accordion, such as 'Fade', 'Zoom In', etc.
• Toggle Icon: Choose an icon to indicate the accordion can be toggled.
• Toggle Active Icon: Choose an icon to show when the accordion section is active.
• Title HTML Tag: Select the appropriate HTML tag for the title, such as 'h2', 'h3', 'div', 'span', etc.
• FAQ Schema: Toggle 'Yes' to add FAQ schema markup, which can help search engines understand and display your content in search results.

Style Tab

Accordion Container

• Background Type: Choose between classic or gradient background types for the accordion container.
• Padding: Adjust the padding inside the accordion container for top, right, bottom, and left.
• Border Type: Select the type of border such as solid, dotted, dashed, etc.
• Border Radius: Set the radius for the corners of the accordion container to control how rounded the corners should be.
• Box Shadow: Add a shadow effect to the accordion container to make it stand out.

Toggle Control

• Label Icon: Choose an icon to display next to the accordion label.
  • Position: Adjust the position of the label icon.
  • Margin: Set the margin around the label icon.
• Toggle Icon: Select an icon that indicates the accordion can be toggled.
  • Position: Adjust the position of the toggle icon.
• Label: Customize the label settings.
  • Alignment: Set the alignment of the label text.
  • Text Color: Choose a color for the label text.
  • Typography: Adjust the font settings for the label.
  • Label Icon: Select an icon for the label.
  • Background Type: Choose the background type for the label area.
  • Border Type: Choose the border style for the label.
  • Padding: Set the padding around the label.
  • Border Radius: Define the border-radius for the label.
  • Box Shadow: Apply a shadow effect to the label.

Toggle

• Background Type: Choose the background type for the toggle element.
• Color: Select the color of the toggle background.
• Padding: Adjust the padding inside the toggle.
• Margin: Set the margin around the toggle.
• Border Type: Choose the border style for the toggle.
• Border Radius: Define the border-radius for the toggle.
• Box Shadow: Apply a shadow to the toggle for a 3D effect.

Toggle Content

• Typography: Adjust the typography settings for the content within each toggle.
• Text color: Set the color of the text within the toggle content.
• Background Type: Choose a background type for the content area.
• Padding: Set the padding inside the content area.
• Margin: Adjust the margin around the content area.
• Border Type: Select the border style for the content area.
• Border Radius: Define the border-radius for the content area.
• Box Shadow: Add a shadow effect to the content area.