SR Tabs Accordion 01



SR Tabs Accordion 01 is great for FAQs.

Module Overview - SR Tabs Accordion 01

This module is a combination of headers, subheaders, cards, and texts

An ideal use case for SR Tabs Accordion 01 is for frequently asked questions and answers about your products or services.



Module Settings Walkthrough

Styles

You can edit the following items within the Styles tab:

• Layout: page or full-width
• Container width: minimum, narrow, wide, maximum
• Top-bottom padding: default, no padding, small padding, large padding, custom padding
• Background option: image, video, color, custom, gradient
• Text align: right, left, center, justified
• Text color: auto, primary, secondary, tertiary, white, black, dark, light, success, info, warning, danger, custom
• Border styles: none, solid, dotted, dashed, double
• Responsive settings:
  • Tablet: text-align at breakpoint (same text-align options); top-bottom padding at breakpoint (same padding options)
  • Mobile: text-align at breakpoint (same text-align options); top-bottom padding at breakpoint (same padding options)





Module Settings

For SR Tabs Accordion 01, most settings are focused on the header(s), description and cards



Setting custom classes and ID

At the very top of the content section, you have the ability to add custom classes and an ID to the module.

• Learn more about adding custom CSS
• Learn how to use the module ID



Header and Content

The first setting you see when editing SR Tabs Accordion 01 is the header.

You can have as many headers as you want. You can even choose which Size they are: H1, H2, H3, H4, H5, H6, P.

You can also choose the Display Size to L, XL, XXL, XXXL

You also have an option to create a sub-header or description





Editing the Accordion Items

• You can have as many Accordion Items as you want.
• Each card comes with an Accordion Label and Accordion Content.
• You also have the option to have the accordion expanded by default.



Extra module behavioural settings

The SR Tabs Accordion 01 module has extra settings that affect the behaviour of the module. These settings are:

• One column: You have the ability to have the accordion items, and the headings occupy just one column.
• Sticky: You have the option to have the headings of the module stick when scrolling.
• Close Inactive Accordions: You have the option to only show active accordions.
• Accordions to show: You have the ability to set the number of accordions to show on load.

How to Use SR Tabs Accordion 01- See it Live

1. Sprocket Rocket Module page: You can see the module live.
2. AdoptMatch's FAQ Page: Here is a nice example of how they want their FAQ page to look like. The visitor can choose which questions they want to see the answers on!