This documentation provides comprehensive insights into the using ACF Accordion widget developed by Element Pack Pro.

Activate ACF Accordion Widget

To use the ACF Accordion from Element Pack Pro Widget must be enabled. Navigate to WordPress Dashboard >Element Pack Pro Plugin dashboard.

1. Navigate to 3rd Party Widgets Tab.
2. Search by the ACF Accordion Widget Name.
3. Enable the ACF Accordion Widget.
4. Hit the Save Settings Button.

Create ACF Content

We will create an ACF content from the ACF Fields section. Please follow Step by step guide.

Note: you must install and activate the ACF Pro Plugin.

Add Fields Group

Navigate to the ACF > Field Groups Section.

1. Click on the ” + Add New ” button. It will allow to add new fields group.

2. Now set the Field Group Name. Choose any name.

Add Field

1. Click on the “ + Add Field ” button to add new fields.

2. Field Type: Select the Field Type. Different types of fields are available. Text, Number, Email, Select, etc. Select the Repeater Fields among them.
3. Field Label: Set the label for the field label.
4. Field Name: Set the name for the Field name. It will be in small later no space , use the underscore.

Add Sub Fields

1. Navigate to the sub field and click on the “ + Add Field ” button to add sub fields.

2. Field Type: Set the type for the fields. Select the Text for the field. Different type are available text, email, etc.
3. Field Label: Set the Field label. Choose any name for the field label. e.g: Accordion Title.
4. Field Name: Set the field name as the label, Keep in small latter and don’t use any space, Use underscore instead.
5. Default Value: Set the default value to the fields.

6. Click on the ” + Add Field ” again to add another sub fields. Add as many as field needs.

7. Another fields add for the Accordion Content. e.g.: Accordion Content.

Settings

Set the Rules for appearing the ACF content on certain place.

1. Post Type: Select the type for the field Post, Pages, User, Or Forms. Choose the Post Type.
2. Set condition: Set the condition Is equal to or Is not equal to. If this select the is equal to it will refer the similar with the condition.
3. Select the condition where to work with, Select Page, Post, Templates etc.

Create a Page for ACF Accordion

Navigate to the Pages > All Pages

1. Click on the ” Add New ” page to add new pages.

Add ACF Accordion Content

1. Set the name for the page.
2. At the bottom of the page the Newly added ACF Fields appear. Here add the acf content by following. Click on the ” Add Row ” button to add new row for the custom fields.

3. Set the content for Accordion Title and Accordion Content.
4. To add more content click on the Add Row Button againa.

5. After completing the content for the ACF Accordion.
6. Click on the ” Edit with Elementor ” to edit the page.

Insert ACF Accordion

1. Go to the Elementor Editor Page and Hit the Add Element ” + ” Icon.
2. Search by the ACF Accordion widget name.
3. The widget will appear, Check the Ultimate Store Kit logo on top right corner.
4. Select the widget then Drag and Drop it on the editor page.

Configuring the Content Tab

The Content Tab provides options to manage and structure the core settings of elements. It allows to define the content and functionality to align with design goals.

ACF Accordion Section

Go to Content > ACF Accordion

1. Repeater Field: Select the repeater field first. Search by the name of the repeater fields and select it.

2. Title: Select the title fields. Search by the title fields name and select it.

3. Content: Select the content section for the ACF content.

4. Title HTML 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).
5. Icon: Set the Icon for the accordion.
6. Active Icon: Set the Icon for the Active Item.
7. Show Title Icon: Enable the switcher to show the Icon on the Title Section.

Additional Section

Go to Content > Additional

1. Collapsible All Item: Enable the switcher to allow all the items as collapsible.
2. Multiple Open: Enable the switcher to open multiple item at a time.
3. Close All Items on Mobile: Enable the switcher to close all the items on mobile device.
4. Active Item No: Set the active item. It will open the item initially.

5. Hash Location: A hash location refers to the part of a URL that comes after the # symbol, used to navigate to a specific section of a page without reloading it.
6. Scrollspy: Scrollspy is a JavaScript feature that automatically updates navigation links based on the scroll position of the page, highlighting the active section as the user scrolls.
7. Top Offset: It refers to the distance in pixels from the top edge of the viewport or container to an element, often used to control positioning or scrolling behavio
8. Scroll spy Time: Scrollspy time typically refers to the duration or delay used in animations or smooth scrolling when navigating between sections using Scrollspy, helping control how fast the scroll happens when a link is clicked.
9. Schema Active: Schema Active means that structured data (schema markup) is enabled and active on your website, helping search engines better understand your content and potentially display rich snippets in search results.

Designing with the Style Tab

The Style Tab offers a range of options to enhance the visual appearance of elements, enabling precise adjustments and creative design possibilities. It helps create polished and engaging layouts effortlessly.

Item Section

Go to Style > Itme

1. Item Gap: Set the gap between the items.
2. Alignment: Set the position for the aligning the items.

Normal Tab

1. Color: Choose Color for the ACF Accordion Title.
2. Background Type: Set the background type color for this.
3. Border Type: Set the type for the border.
4. Border Width: Set the width for the border.
5. Border Color: Choose the color for the border.

6. Border Radius: Make the border radius.
7. Padding: Set the padding for the content.
8. Typography: Select the typography for the accordion title.
9. Text Stroke: Set the stroke for the text.
10. Box Shadow: Make the shadow for the box items.

Hover

1. Color: Set the color for the Item.
2. Background Type: Make the background type color for this.
3. Border Color: Make the border color for the items.

Active

1. Color: Make the color for the Active Item.
2. Background Type: Make the border type for the Color.
3. Box Shadow: Make the shadow for the box item.
4. Border Type: Select the border type for the Item. Different type are available solid, dashed, dotted, grove etc.

Content Section

Go to Style > Content

1. Color: Set the color for the Content.
2. Background Type: Make the border type Color for the background.
3. Border Type: Set the border type for the Background.
4. Border Width: Set the width for the border.

5. Border Color: Set the color for the border of the content.
6. Border Radius: Make the border corner edges rounded.
7. Padding: Set the padding for the content.
8. Spacing: Make space between the accordion items.

9. Box Shadow: Make the shadow for the box item.
10. Alignment: Set the alignment for the content.

1. Alignment: Set the alignment for the Item, Left or Right.

Normal Tab

2. Color: Set the color for the Icon.
3. Background Type: Set the background for the Icon.
4. Border Type: Set the border type color.

5. Border Width: Set the width for the Border. Different type of width are available Double, Dotted, Dashed, Grove etc.
6. Border Color: Set the color for the Border.
7. Border Radius: Make the border radius.
8. Padding: Set the padding for Icon.

9. Spacing: Set the spacing for the icon.
10. Icon Size: Set the size for the Icon.
11. Box Shadow: Make a shadow for the Icon.

Hover Tab

1. Color: Set the color for the Icon.
2. Background Type: Set the background type color for the Icon.
3. Border Color: Set the border color for the icon. The changes appear on mouse hover.

Active Tab

1. Color: Set the color for the active Icon Item.
2. Background Type: Make the background type color for the Icon.
3. Border Color: Set the border color of the Icon.

Video Assist

Please Watch the Video Tutorial.

Check the demo by following.
Thanks in advance.