# Accordion Stories

Create narrative content with expandable sections that can include maps, datasets, and rich text.

## Overview

Accordion Stories provide a storytelling interface with expandable sections. Each section can contain rich HTML content, embedded maps, and linked datasets, making them ideal for creating interactive narratives and guided explorations.

## Creating Accordion Stories

### Access

- Navigate to Accordion Stories (`accordion_stories.php`)
- Publishers and admins can create stories
- Users can view stories they have access to

### Story Structure

Stories consist of:
- **Title**: Story title
- **Description**: Story description
- **Sections**: Multiple expandable sections
- **Category**: Optional categorization
- **Permissions**: Access control settings

## Sections

### Section Content

Each section can contain:

- **Title**: Section heading
- **HTML Content**: Rich text with formatting
- **Dataset Link**: Optional dataset association
- **Maps**: Embedded map displays
- **Media**: Images and other media

### Section Features

- **Expandable**: Click to expand/collapse
- **Rich Text**: HTML formatting support
- **Dataset Integration**: Link to datasets
- **Map Integration**: Display maps in sections
- **Ordering**: Custom section order

## Building Stories

### Step 1: Create Story

1. Navigate to Accordion Stories
2. Click "New Story"
3. Enter title and description
4. Select category (optional)
5. Set permissions

### Step 2: Add Sections

1. Open story builder
2. Add new section
3. Enter section title
4. Add HTML content
5. Optionally link dataset
6. Save section

### Step 3: Configure Content

1. Use rich text editor for content
2. Format text with HTML
3. Add images and media
4. Link to datasets
5. Embed maps if needed

### Step 4: Arrange Sections

1. Reorder sections by dragging
2. Set default expanded section
3. Organize narrative flow
4. Save story

## Content Editor

### Rich Text Editing

- **Formatting**: Bold, italic, underline
- **Headings**: Multiple heading levels
- **Lists**: Ordered and unordered lists
- **Links**: Hyperlinks to external content
- **Images**: Image embedding
- **Tables**: Table creation

### HTML Support

- Direct HTML editing
- Custom styling
- Embedded content
- Script integration (if allowed)

## Dataset Integration

### Linking Datasets

- **Dataset Selection**: Choose dataset to link
- **Automatic Display**: Map automatically displays linked dataset
- **Synchronization**: Section expansion shows linked data
- **Filtering**: Apply filters to linked datasets

### Map Display

When a section has a linked dataset:
- Map automatically displays dataset
- Section expansion shows map
- Map updates with section changes
- Interactive map features available

## Viewing Stories

### Story Viewer

- **Left Panel**: Accordion sections
- **Right Panel**: Map display (if dataset linked)
- **Navigation**: Expand/collapse sections
- **Responsive**: Mobile-friendly layout

### Interaction

- **Expand Sections**: Click to expand
- **Collapse Sections**: Click to collapse
- **Map Interaction**: Pan, zoom, query
- **Content Scrolling**: Scroll through content

## Use Cases

### Guided Tours

- Location-based tours
- Historical narratives
- Educational content
- Story maps

### Data Narratives

- Data exploration guides
- Analysis walkthroughs
- Results presentations
- Research stories

### Documentation

- Feature documentation
- User guides
- Tutorial content
- Help systems

### Presentations

- Interactive presentations
- Conference materials
- Public engagement
- Stakeholder reports

## Permissions

### Access Control

- **Public**: Accessible to all users
- **Private**: Creator only
- **Group-based**: Shared with user groups
- **Custom**: Specific user permissions

### Editing Permissions

- **Creator**: Can edit their stories
- **Admins**: Can edit all stories
- **Publishers**: Can create and edit stories
- **Users**: Can view accessible stories

## Story Management

### Editing

- Edit story metadata
- Modify sections
- Update content
- Reorder sections
- Change permissions

### Sharing

- Share via URL
- Set public/private status
- Configure group access
- Embed in other pages

### Organization

- Categorize stories
- Tag stories
- Search stories
- Filter by category

## Example Story

A typical accordion story might include:

1. **Introduction Section**: Overview and context
2. **Data Section**: Dataset description with linked map
3. **Analysis Section**: Analysis results and findings
4. **Conclusion Section**: Summary and next steps

Each section expands to reveal content and updates the map display.

## Best Practices

### Content

- Write clear, engaging content
- Use appropriate section titles
- Organize content logically
- Include visual elements

### Maps

- Link relevant datasets
- Use appropriate basemaps
- Configure map styling
- Test map interactions

### Navigation

- Set logical section order
- Use descriptive titles
- Provide clear navigation
- Test user experience

## Related Documentation

- [Dashboard](dashboard.md)
- [Web Apps](web-apps.md)
- [Dataset Viewer](../ui/dataset-viewer.md)
- [Map Viewer](../ui/map-viewer.md)