Accordion Forge User Guide

1. What Is Accordion Forge?

Accordion Forge is a visual accordion builder created with Vanilla JavaScript, CSS Grid, and HTML. It allows you to:

Create accordion items visually
Edit button text and panel content
Upload images into panels
Customize colors, typography, borders, and spacing
Preview the accordion live
Export production-ready HTML/CSS/JS code

Illustration — Main Workspace Layout

Live Preview + Export Area

Accordion Item #1 ▼

This is a preview of the accordion content.

Generated export code appears here.

2. Adding Accordion Items

To create a new accordion section:

Step 1: Click the + Add New Accordion Item button.

Step 2: A new item card appears in the sidebar.

Step 3: Edit:

Button Text
Panel Content
Optional Image Upload

Illustration — Item Entry Card

Delete Item

Button Text → "FAQ Section"

Panel Content → "This is the answer..."

Image Upload → Choose image file

3. Customizing the Design

The Design Suite allows complete visual control over the accordion.

Available Design Controls

Accordion Width
Button Background Color
Button Text Color
Panel Background Color
Panel Text Color

Illustration — Design Suite

Accordion Width: 600px

Button BG: White

Button Text: Dark Gray

Panel BG: Light Gray

Panel Text: Medium Gray

4. Typography & Spacing

Typography controls affect the appearance of all accordion buttons.

Typography Options

Font Family
Font Size
Font Weight

Spacing Controls

Padding (Top Right Bottom Left)
Margin (Top Right Bottom Left)

Illustration — Padding Layout

Margin

Padding Area

5. Border Workshop

The Border Workshop controls the accordion border styling.

Border Width
Border Style
Border Color

Illustration — Border Styles

Solid

Dashed

Dotted

Double

6. Accordion Behavior Modes

Accordion Forge supports two interaction modes.

Independent Mode

Multiple accordion panels can remain open simultaneously.

Exclusive Mode

Opening one panel automatically closes the others.

Illustration — Behavior Logic

Independent:

✔ Item 1 Open

✔ Item 2 Open

Exclusive:

✔ Item 1 Open

✖ Item 2 Closed Automatically

7. Live Preview System

Every change updates instantly in the preview window.

The preview system dynamically:

Regenerates accordion HTML
Applies updated CSS styles
Reconnects accordion behavior logic
Refreshes the export code

8. Exporting Your Accordion

Accordion Forge automatically generates complete export-ready code.

Export Options

Copy to Clipboard → Copies HTML/CSS/JS code
Download Forge Package → Downloads standalone HTML file

Illustration — Export Zone

<div id="forge-acc-wrapper"> ... </div> <style> ... </style> <script> ... </script>

9. Technical Architecture

Accordion Forge is built entirely with:

HTML5
CSS Grid Layout
Vanilla JavaScript

Key architectural features:

State-based item storage
Dynamic CSS generation
Live DOM regeneration
ARIA accessibility attributes
Instant code exporting

10. Quick Workflow Summary

1. Add accordion items

2. Edit text and content

3. Upload optional images

4. Customize design and typography

5. Select accordion behavior

6. Preview live updates

7. Copy or download the generated code