# SW Magic Accordion — AI Agent Reference **Module name:** SW Magic Accordion **Master version number (as of this document):** 2026.03.31.22.40 **Use this document when:** The user asks about the **Smithworks SW Magic Accordion** HubSpot module—tabs vs accordion, default panel vs items, images, forms, CTAs, Style → Display Settings, Content Colors, or roll-down / alias risk. --- ## Instructions for the AI Agent - **Unless the user explicitly provides HubSpot CLI or Design Manager access, assume you cannot see their portal.** Answer from this document and any other files the user supplied. - **Editor paths:** Use the **exact** tab names, group names, and field labels in **§3 Configuration Reference** below. - **Not in the module:** Say so, then point to **custom CSS** (often **`custom-styles.css`** on Sprocket Rocket–based themes). Use **§4 Appendix** selectors when possible. - **Support:** [smithworks.marketing/contact](https://smithworks.marketing/contact) --- ## Versions, roll-down, and alias risk **SW Magic Accordion** has had multiple **structural** `fields.json` changes (Display Settings under **Style**, Content Colors, repeater-only CTAs, Pillar-style image layout, etc.). Before upgrading a theme copy: 1. Compare **Master version number** in `module.html` / `module.css` / `module.js` (all three must match). 2. **Diff** `fields.json` vs **`SW-Dev/sw-master/sw-modules/SW Magic Accordion.module/fields.json`**. 3. Read **`docs/alias-mapping-risks.json`** (key **`SW Magic Accordion.module`**) and **`docs/SW-Module-Docs/SW Magic Accordion/MAINTENANCE-NOTES.md`** if present in the repo. **Legacy CTAs:** Master removed flat **Add Button 1 / Add Button 2** fields in favor of **`Buttons`** repeaters on the default panel, each accordion item, and **module bottom**. Pages that never used repeaters may need CTAs re-entered after upgrade. --- ## Desktop tabbed view: stable panel height (UX) On **desktop**, when the module uses **tabs** (not the all-accordion breakpoint), the **tab content area keeps a stable height** (driven by **minimum height** / layout so panels share one row). A **shorter** tab’s content may show **empty space below** inside that area. This is **intentional**: switching tabs does **not** resize the whole section, so the **page does not jump** vertically. Asking for each tab to **shrink-wrap** would be a different UX (trade-off: layout shift on every tab change). --- ## HubSpot video and file uploads (plans and limits) **Content → Module Background Video** may use **HubSpot Video**, **Video from Files**, and/or **External Embed**, depending on the field. - **HubSpot Video:** May require subscription features; confirm hub tier in HubSpot documentation. - **Video from Files:** File Manager uploads; many portals enforce **~20 MB per file** and storage limits—compress or use embed if blocked. - **External embed:** YouTube/Vimeo URL-style sources. --- ## 1. Purpose and when to use **SW Magic Accordion** provides: - **Optional module headings** (**Content → Headings**, State 3 repeater — same pattern as SW Simple Hero). - A **default panel** (optional) plus **Tab / Accordion Items** (repeater). Each row can be **rich text**, **form**, or **image + content** (per-item). - **Desktop:** often **tabs** with a **tabbed content panel**; **mobile / narrow:** can collapse to **accordion** (per **Style → Display Settings**). - **Pillar-style image layout:** **Style → Display Settings → Image Layout Settings** (desktop/tablet/mobile column order; image column widths). Default panel and each item can override column order; widths follow Style defaults. - **CTAs:** **`Buttons`** repeaters (SW Button–style rows) on default panel, each item, and **module bottom** (full-width row **below** the tab/accordion UI, not inside the side-by-side flex column when tabs are left). - **Style:** **Module Settings** (spacing, max width, min heights per breakpoint), **module background**, **Content Colors** (panel text + **Link Colors**), **Display Settings** (tab position, top-tab scroll hints, borders, padding, tab chrome colors), **Text Box Settings**, **Headings** group for tab/accordion title typography. **Compared to SW Pillar Accordion:** Pillar Accordion is **one image column** that swaps with the active panel. **SW Magic Accordion** supports **tabs**, **per-item images**, **forms**, and **module-level video** patterns aligned with other SW modules. --- ## 2. Module structure (page order) 1. **Outer wrapper** — `smithworks-module sw-magic-accordion`; module spacing / max width / min height from **Style → Module Settings**. 2. **Module headings** (if any) — inside container, above default panel / tab UI. 3. **Default panel** (if enabled) — can show above the tab strip or within the tabbed layout depending on configuration; may include image + content + CTAs. 4. **Tab strip + panel region** — tabs (desktop) or accordion triggers (narrow); panel body uses **Content area padding** from **Style → Display Settings → Accordion & panel content**. 5. **Module bottom Buttons** — optional repeater below the main tab/accordion container. --- ## 3. Configuration reference (high level) ### Content tab - **Enable Module**, **Custom ID**, **Custom Classes** - **Headings** (repeater) - **Default Panel** — enable, content type (hero / rich text / form), image, rich text, **`Buttons`** repeater + **Button Alignment** (+ tablet/mobile overrides), per-panel colors/background overrides, **Desktop/Tablet/Mobile Column Order** overrides (vs Style defaults) - **Tab / Accordion Items** — repeater: title, content type, form, image, content, **`accordion_button_items`** + alignment overrides, colors/background, column order overrides - **Buttons** (module bottom) — repeater + **Button Alignment** + tablet/mobile overrides - **Module Background Video** — source, poster, embed (see video limits above) ### Style tab - **Module Settings** — spacing, max module width, **minimum height** modes and overrides (XL/LG/MD/SM) - **Content Colors** — panel **Text Color** / custom + **Link Colors** (`Panel content links.` inline; full guidance in tooltip) - **Module Background** — color, gradient, responsive image groups, video overlay/base, playback toggles; **fixed background** image option - **Display Settings** — container (tab position, gaps, equally spaced tabs, max visible tabs, **Tabs to Content Gap**), **Top Tabs Options** (scroll hints, motion, scroll arrow color), **Image Layout Settings**, **Accordion & panel content** (vertical alignment, **content padding**), **color_settings** (tab title, hover, panel chrome), **Borders** (including **Zero Inside Corners**), **Text Box Settings**, **Headings** (tab/accordion title display sizes, etc.) --- ## 4. Appendix: CSS hooks (partial) - Root: `.sw-magic-accordion` (data attributes for tab position, top-tabs hints, inside corners, link context, etc.) - Panels: `.sw-magic-accordion__panel`, `.sw-magic-accordion__content`, `.sw-magic-accordion__cta`, `.sw-magic-accordion__cta--module-bottom` - Tabs: `.tabs-nav`, `.tabs-scroll`, `.sw-magic-accordion__tab` Use browser devtools on a live page for the exact attribute set on the instance. --- ## Document version - **2026-03-31 (Finish Up 2026.03.31.22.40):** Initial Smithworks **`SW-Magic-Accordion.txt`**; aligns with master **SW Magic Accordion** shipped fields and **SW AI Documentation.html** section. Update this file when `fields.json` or behavior changes materially; bump **Master version number** line to match module headers.