Accordion

The Accordion web part for Sprocket 365 is a powerful tool that allows you to create collapsible sections of content. This can be used to organize information in a way that is easy to scan and understand. The Accordion web part is easy to use and can be customized to meet your specific needs. In this article, we will show you how to create and use the Accordion web part in Sprocket 365.

Features

• Show content in an expanded and collapsed space
• Directly write content within the web part settings
• Pull content from a SharePoint within the current site or any site
• Choose between two layouts: List or Cards
• Group accordion items by a list column (List type) or by category (Manual type)
• Includes a search feature so you can search for keywords within the Accordion web part.
• Copy or email accordion contents
• Specify behaviors of expand and collapse
  • Allow multiple expanded at once
  • Default with first item expanded

Configurations

After you select the Sprocket Accordion web part, click the Configure Web Part button or icon on the menu on the left of the web part to open the configuration panel on the right.

1. Configure how the web part looks and behaves:

   Field	Description
   Show Title	Click to enable title display of the web part.
   Show in Panel	Click to enable display of items in panel.
   Layout	Choose List or Cards. List shows items in a vertical list with brand accent bars. Cards wraps each item in its own card.
   Type	From the drop-down list, select List or Manual. List option enables you to create a list of FAQ questions from a convenient configuration page. In List option, you can also format the answer text in an HTML formatting window. Manual option enables you to create question and answer text in the web part configuration section itself.
   Show first item expanded	Click to enable the display of first item expanded, when you open a page.
   Show expand/collapse all	When enabled, shows an Expand All / Collapse All control above the accordion items.
   Allow multiple items to be expanded	Click to enable this option to keep multiple items expanded.
   Show Copy to clipboard	Click to enable copy to clipboard button.
   Show Email button	Click to enable email button.
   Show search bar	Click to enable the search bar. This will allow you to search by title or contents.

2. Query Options (List type only)

   If you have selected List type, configure the following in the Query Options section on page 2. All these fields are mandatory:

   Field	Description
   Site URL	Click the drop-down list and select a source site.
   Web URL	Click the drop-down list and select a source web.
   List Title	Click the drop-down list and select a source list.
   Group By	Optional. Select a list column to group items into tabs. Available after List Title is set. Leave empty to show all items in one accordion.
   Filters	Optional. Add filters to limit which list items are shown.

If you have selected Manual type, configure the following:

1. Optionally turn on Group items by category. When enabled, each item includes a Group field and items are shown under category tabs.

2. Click Add to create an item.

3. Enter Title (for example, the question) and Body (for example, the answer). Use the rich-text editor for formatted body content.

4. If grouping is enabled, enter a Group name for the item.

5. Repeat Add for further items. Items can be reordered in the list.

6. Styles

Optional styling overrides:

Field	Description
Custom Styles	Add custom CSS for the web part.
Custom CSS Class	Add a CSS class applied to the root element of the web part.

When configuration is complete, click Republish to publish the page.

FAQs

1. How do I change the Accordion Web Part Title?
To change the Title of the Accordion web part, you need to first Edit the page, once in Edit mode you can highlight the text and simply type to replace your new Title.

2. What does the Panel setting do?
The panel setting placed a fine grey border around the web part and provides a solid white background. This setting is best used if you are using solid background colors in your sections.

3. What is the difference between the 'Manual' and 'List' option?
The Manual option allows you to add your Accordion items directly in the web part settings. The List option allows users to manage the items in a list rather than editing a page and web part.

4. How do I add a new item manually?
Set Type to Manual in Display Options, then open the Accordion Items section in the configuration panel. Click Add, then enter a Title and Body for each item. If you use grouping, turn on Group items by category first and fill in Group for each item.

5. What is the difference between List and Cards layout?
List displays accordion items in a continuous vertical list with a brand-colour accent on each row. Cards displays each item inside its own bordered card; only expanded cards show body content below the header.

6. How does Group By work?
For List type, open Query Options and choose a column in Group By (optional). Items are grouped by that column’s value and shown under tabs. For Manual type, open Accordion Items, enable Group items by category, and enter a group name on each item. In narrow columns, tabs appear above the accordion; in full-width sections, tabs appear beside the content.