Skip to main content

Set Up and Configure Zenpo Accordion

Add Zenpo Accordion to a modern SharePoint page, bind a list or library, and map Header text and Body content. The property pane groups are License, Data, Content mapping, Layout, Behavior, and Appearance (web part only).

Bind a list or create a starter list​

  1. Edit the page and select the web part.
  2. Open the property pane.
  3. Under Data, set Data source (list) to a SharePoint list or document library on the site.
  4. Choose a View. The control stays disabled until a list is chosen. The pane hint is The View carries the order, the filter and the item limit.
  5. Set Cache duration if you want a value other than the default 5 minutes (recommended).

Heading is optional. The placeholder is (no heading).

Changing the list clears all role bindings and remaps likely columns. Changing only the view keeps the bindings. Appearance, layout, and behavior settings survive a source change. Shared mapping and cache rules are on How Zenpo Web Parts Use Your SharePoint Data.

Optional starter list​

If you can manage lists on the site, the pane shows Need a starter list? Create one with sample data. The link is hidden when you cannot create lists.

The dialog title is Create a starter list. It creates one list in this site named FAQs, with Answer (rich text) and Rank (number) alongside the built-in Title. The default view is ordered by Rank. Sample rows are three fictional HR questions.

Buttons are Create list and Cancel. While it runs, the busy label is Creating...

  • Success: {list} created with {N} sample questions. Replace or edit them when ready.
  • Failure: The list could not be created. Check that a list with that name doesn't already exist, then try again.

After creation, the web part binds the new list and its default view and maps Header text and Body content. Shared starter-list rules are on Create Starter Lists with Sample Data.

Map header, body, and optional fields​

Under Content mapping:

  1. Map Header text (required).
  2. Map Body content (required). Rich text is supported. The pane hint is Rich text is supported. Scripts and embeds are stripped — map Video URL for media.
  3. Optionally map Group by (optional).
  4. Open ▸ More fields to map Image (optional), Video URL (optional), Byline (optional), Date (optional), Link URL (optional), and Excerpt (optional).

Unbound optional roles show (none) and render nothing.

Link URL (optional) offers (none), Item URL (source item), and the list's URL columns only.

Body content is sanitized. Scripts, styles, iframes, embeds, forms, and SVG are stripped. Links keep only http, https, mailto, tel, and relative URLs. New-tab links get rel="noopener noreferrer".

Pictures and video do not come from the body text. Map Image and Video URL. On a document library, the file itself is the media. List Image columns and item attachments are supported.

Choose a render mode​

Under Layout, set Render mode. Vertical is the default.

Locked options read Media split — needs an image or video column and Post — needs an image column. Map the unlocking column first.

Horizontal​

  • Collapsed rail width: 56 px (default) or 72 px
  • Expanded panel width: Fill remaining (default) or Fixed 640 px

Below 640 px of container width, Horizontal falls back to Vertical. That is automatic and not configurable.

Media split​

  • Pane side: Right (default) or Left
  • Split ratio: 30/70, 40/60 (default), or 50/50
  • Media aspect ratio: 16:9 (default), 4:3, or 1:1
  • When an item has no media: Keep the last shown (default), Hide the pane, or Show placeholder

Post​

  • Image position: Left of body (default) or Above body
  • Metadata row: Byline, Date (default), Date only, Byline only, or Hidden
  • Excerpt length: 240 characters (default), 120 characters, or Full body

Header heading level​

Header heading level is Heading 2, Heading 3 (default), or Heading 4.

Under Behavior:

  • Expand behavior: One at a time (recommended) (default) or Multiple
  • Default state: All collapsed (default), First item open, or Remember last opened
  • Open link in: New tab (default) or Same tab
  • Toggle-all control: Off (default), Above, right, or Above, left
  • Search: Off (default) or Above items
  • Search scope: Headers only (default) or Headers and body. This control is visible only when Search is on.
  • Animation: Slide and fade (recommended) (default), Slide, Slide with overshoot, or None
  • Speed: 1 — Relaxed (400 ms), 2 — Standard (240 ms, recommended) (default), or 3 — Fast (120 ms). Speed is hidden when Animation is None.

If a visitor's device requests reduced motion, that request always wins over the Animation setting.

Horizontal and Media split keep exactly one item open.

How the read-more label is chosen​

The read-more control has no author-typed label. It names itself from the destination:

  • Document: Open document
  • Image: Open image
  • Video: Open video
  • Generic list item via Item URL (source item): View item
  • Everything else: Read more

If you map a Link URL column and that cell is empty, the button is hidden. There is no fallback to the item URL.

Set appearance​

Under Appearance (web part only):

  • Color vibe and Accent color (six colors). Shared options are on Appearance Settings: Color Vibe, Accent Color, and Corner Radius.
  • Corner radius: 0–16, default 4
  • Icon: Chevron (default) or Plus / minus
  • Icon position: Trailing (default) or Leading
  • Header treatment: Filled row (default) or Rule separated
  • Item spacing: Joined (default) or Gapped
  • Margin: 2–20, default 12

Changing Color vibe resets Corner radius to that vibe's default.

Last updated on