In Frontis Blocks, the Accordion block is an interactive content block designed to display information in a collapsible format. It is often utilized to arrange content into sections that users can expand or collapse.

Adding Frontis Accordion Block 

To add the Frontis Accordion block, navigate to the page or post where you want to insert the advanced heading. Then, click the + (plus) icon at the top of the left side of the screen.

The Frontis menu bar interface will appear. Search the Accordion in the search box or select from the menu bar.

After inserting the Accordion blocks, follow the steps below;

• Click on the Document Overview button, and then you will see the blocks list view on the right side.
• Click on the block, and all the control tabs will show  (Basic, Style, Extra).

Basic section

• Title Tag: This section lets you set the Accordion item title tag H1-H6, P, or span, based on your preference.
• Accordion Gap: You can customize the accordion’s gap as you wish, but you must leave a value in it; otherwise, this feature won’t work properly.
• Add Accordion: To add an Accordion, click on the Add item button. Here you can add as much as you need.
• Title text: To change each accordion’s text, tap on the Accordion that you want to change. The title text option will show on the right side. You can add any text here that will show in the Accordion’s title.
• Title suffix, Prefix: Frontis lets you add a suffix or a prefix to the Accordion. To add a suffix or prefix, click on the Title bar, and it will show the Title suffix and Title Prefix section. You can add an image and an icon to your accordion with it.
• To include an image or icon at the start, insert the prefix. Conversely, if you wish to include an image or an icon at the end, append the suffix. Select the none option if you prefer not to include a suffix or prefix.

Style Section

Style > Items Icon

To add an icon to your item, go to the Style section, click on the Items Icon, and enable the display icon switch. After allowing the switch, you can see the menu. Here you can change the tab icon or image, expand icon, icon size, icon position, and icon color.

Style > Items Title

• Text Align: This feature allows you to change the alignment of your accordion text, Left, center, right, and between.
• Typography: The typography section lets you change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height.
• Text Color: The text color feature lets you change the color of your text. 
• Background Color: This function allows you to change the background color of your accordion. You can use solid or gradient colors, according to your project needs.
• Title suffix and prefix: From here, you can adjust the dimensions of the prefix and suffix icons.

Item Title Spacing: Item Title spacing (padding) enables you to add space around an object to expand the internal area. This feature also allows you to add space on just one side. Tap on the Link symbol and modify the padding on any side as you desire.

Title Border and Radius: Here you can customize the border style, border color, border size, and border radius.

• Box shadow: The box shadow is usually used to create the shadow around the element. It has four values: Horizontal offset (X), Vertical offset (Y), Blur, and Spread. You can also change the text shadow color from here.

Item content: This function allows you to customize the background color, border style, border color, border size, and border radius.

Extra section

Z-Index: Consider the z-index as layers of sheets on a table. The greater the z-index, the more “above” the element appears. Therefore, if two elements intersect, the one with the greater z-index will be displayed in front.

However, it functions only when the element is positioned (relative, absolute, fixed, or sticky). Without it, z-index has no effect. 

Overflow section: The Overflow feature in the Advanced section of Frontis Blocks controls how extra content behaves when it goes beyond the block’s size. The overflow property determines the action to take in this scenario.

Values of overflow:

• Visible: The visible overflow value shows all content, even if it goes outside the box. It won’t be hidden or cut off, and no scrollbars will appear. 
• Hidden: The hidden overflow value hides any content that goes outside the box. It gets cut off, and no scrollbars appear, so users can’t see the extra content.
• Scroll: The scroll overflow value always shows scrollbars. If the content is too big, you can scroll to see it. Even if there’s no extra content, scrollbars still appear.
• Auto: The auto overflow value adds scrollbars only when needed. If the content fits inside the box, no scrollbars show. If it overflows, scrollbars appear automatically.
• Clip: The clip overflow value hides any content that overflows the box without showing scrollbars. The extra content is simply cut off and cannot be seen or scrolled.

Padding: Padding allows you to add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and add or reduce the padding on any side you want.

Margin: Margin enables the adjustment of an object’s placement on the canvas. With this feature, you can add a margin around an object or a single side. Click on the Link icon and add or reduce the Margin on any side you want.

Border and Shadow: You can place a border around the entire area and adjust the border color and border radius. This option allows you to apply a box shadow to the Accordion.

Responsive Control: In this section, you will get 3 switches (Hide on Desktop, Hide on Tablet, Hide on Mobile). These switches allow you to show or hide the heading on various devices.

Custom CSS: If you are an expert or have coding knowledge, you can add Custom CSS in this section to make it responsive.