How to use Accordion block by Zoloblocks

This documentation provides comprehensive insights into the Accordion Blocks developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Accordion block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Post List block.
3. After on the right side, Click on the Block. Then the Post Grid details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab (Parents Blocks)

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences. Customize for the Parent’s blocks. Any changes applied will all items.

General Section

Go to Basic > General

In this section, you can set the general controls of accordion,

1. Initial Open Item: It allows one to open an accordion initially. Select any accordion number to open.
2. Allow multiple open at a time: Enabling this switcher will allow open multiple accordions at a time.
   [ This features work on the front only ]

Accordion Title

Go to Basic > Accordion

Here you can set the Accordion Title HTML tag,

1. Title Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).

Accordion Icons

Go to Basic > Accordion Icons

In this section, You can set the Accordion Icons,

1. Collapsed Icon: Set the Icon for the accordion collapsed item, Click and select the Icon from the Library.
2. Expanded Icon: Set Icon for accordion expanded item, Choose an icon from the Icon library.

Style Tab (Parents Blocks)

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Item Section

Go to Style > Item

In this item section, You can set the accordion items customizable,

1. Border: Set the border for the accordion.
2. Border Radius: Set the border corner edge round.
3. Padding: Set inner spacing for the accordion items.
4. Margin: Set the margin according to the spacing from one to another.

5. Background: Set background for the accordion items.
6. Box Shadow: Make the shadow for the items.

Accordion Head Section

Go to Style > Accordion Head

In this section, set the Accordion Head more stylish,

1. Title Typography: Set the Typography for this Accordion Head.
2. Border: Set the Border for heading.
3. Border Radius: Set the border corner edge rounded.

4. Padding: Make the inner space of the accordion head.
5. Margin: Set Margin for outer space.

Normal State Accordion Head

Set the head in a normal state,

6. Title Color: Set the color of the Title.
7. Background: Set the Background of the Accordion Head.

Hover State Accordion Head

Set the head in a hover state, it works on mouse hovering.

8. Title Color: Set the color of the Title.
9. Background: Set the Background of the Accordion Head.

Accordion Icon Section

Go to Style > Accordion

Customize the icon by following this section,

1. Size: Set the Size of the Icon.
2. Border: Set the Border of the Icon.
3. Border Radius: Make the border corner round edges.
4. Padding: Make inner space by setting the Padding.

Normal State Accordion Icon

In this normal state, you can set,

6. Icon Color: Set the color of Icon.
7. Background: Set the Background of the icon.

In this Hover state, you can set,

8. Icon Color: Set the color of Icon.
9. Background: Set the Background of the icon.

Accordion Body Section

Go to Style > Accordion Body

This section provides the styling control of the accordion body,

1. Border: Set the Border of the accordion head.
2. Border Radius: Set the border corner edges rounded.
3. Padding: Set padding for the inner space of the body.

4. Margin: Set the margin for the accordion body.
5. Background: Set the background for this body.

Active Accordion Section

Go to Style > Active Accordion

In this section, you can set the style for the Active item of the accordion. It works on active items only.

1. Title Color: Set the Color for the Title of the Accordion Item.
2. Color: Set the Color for the Accordion Icon.
3. Background: Set the Background for the Accordion Icon.

4. Background: Set the Background for the Accordion Head.
5. Background: Set the Background for the Accordion Body.

Single Accordion (Child Blocks)

Here we will work with the Child blocks of Accordion. The changes will applied to the relevant item only. Let’s follow this.

1. Click any item of the Accordion blocks.
2. On the right side, the selected Single Accordion details will appear.
3. The Single Accordion controls will appear here.

Set Accordion Title

Go to Basic > General

Here you can set the Title for this Accordion Title,

1. Accordion Title: Input field you can set the Title.

Add Content of Accordion

1. Click on the Accordion Content Place holder, and A default Paragraph block control will appear on the left.

2. You can set the Paragraph on for accordion. By following you can add any text.

Add a New Single Accordion

1. Click on the ” + ADD ACCORDION ” button to add a new single accordion.

2. After a new single accordion item appears, You can set the Title and Content. Following this you can add as many items you want.

Add Any Blocks on the Accordion

Accordion blocks provide an amazing feature, you can add any blocks you prefer to show here.

1. Click on the ” Add block ” icon on the right side. Then a block popover will appear.

2. Search by block name and Blocks will appear
3. Then Select the right block you want to work with. (Selected Zoloblocks block seeing the icon on the top right corner).

4. Selected blocks will appear and the controls too. Select images for Image Gallery blocks.

Following that, add as many blocks as you prefer, Here are Two blocks, Default Content blocks ( Paragraph ) and Image gallery blocks.

Style Tab ( Child Block )

This tab provides the controls of the Single Accordion Items. The changes will apply only to relevant items. Let’s Explore all the controls.

Item Section

Go to Style > Item

In this section, you can customize a single item of accordion,

1. Border: Set the Border for the accordion item.
2. Border Radius: Set the Border Radius to make the corner edge rounded.
3. Padding: Make the inner space of the item.
4. Margin: Set margin for the Accordion Items.

5. Background: Set the background of the single item.
6. Box Shadow: Set Box Shadow for the accordion item.

Accordion Head Section

Go to Style > Accordion Head

In this section, you can make the accordion head more stylish.

1. Title Typography: Set the typography for the Accordion Head.
2. Border: Set the Border for the accordion head.
3. Border Radius: Make the inner space of the item.
4. Padding: Make the inner space of the item.

Normal State Accordion Head

5. Title Color: Set the Title Color of the accordion head.
6. Background: Set the Background of the accordion Head.

Hover State Accordion Head

7. Title Color: Set the Title Color of the accordion head. Works on mouse hover.
8. Background: Set the Title Color of the accordion head. Works on mouse hover.

Accordion Item Section

Go to Style > Accordion Item

In this section, you can set the accordion icon more interactive,

1. Size: Set the size of the Icon.
2. Border: Set the Border or the Icon.
3. Border Radius: Make border corner edges round.
4. Padding: Make the inner space of the icon.

Normal State Accordion Item

5. Icon Color: Set the Icon color.
6. Background: Set the Background for Icon.

Hover State Accordion Item

7. Icon Color: Set the Icon color for the hover state, See changes on mouse hover.
8. Background: Set the Background for Icon for hover state See changes on mouse hover.

Accordion Body Section

Go to Style > Accordion Body

This section provides the controls of the accordion body, Sets your own customization,

1. Border: Set the border for the single accordion body.
2. Border Radius: Set the border corner edges round by following it.
3. Padding: Make inner space for the Accordion Single Items.

4. Margin: Setting the margin will make space in the accordion item.
5. Background: Set the background for the accordion single item.

Extra Tab Controls

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial for learning more.

Check the Demo Page.

Thanks for being with us!