AdobeDocs · louisachu · Nov 24, 2025 · Nov 20, 2025 · Nov 21, 2025 · Nov 22, 2025
diff --git a/src/pages/assets/openapi.yaml b/src/pages/assets/openapi.yaml
diff --git a/src/pages/assets/platform-hero.png b/src/pages/assets/platform-hero.png
diff --git a/src/pages/assets/sidenav.png b/src/pages/assets/sidenav.png
diff --git a/src/pages/assets/topnav.png b/src/pages/assets/topnav.png
diff --git a/src/pages/blocks/accordion/accordion-basic.md b/src/pages/blocks/accordion/accordion-basic.md
@@ -0,0 +1,42 @@
+---
+title: Basic Accordion Block
+description: Simple accordion example with collapsible text sections.
+---
+
+# Basic Accordion Example
+
+This example shows a simple accordion with just heading and text content, perfect for FAQs or simple collapsible sections.
+
+<AccordionItem slots="heading, text"/>
+
+### What is this accordion component?
+
+This is a collapsible content section that can expand and collapse when users click on the heading. It's useful for organizing large amounts of information in a compact, user-friendly way.
+
+<AccordionItem slots="heading, text"/>
+
+### How does it work?
+
+The accordion component allows you to hide and show content dynamically. When a user clicks on a heading, the corresponding content panel toggles between visible and hidden states.
+
+<AccordionItem slots="heading, text"/>
+
+### Can I use multiple accordions?
+
+Yes, you can include as many accordion items as needed on a single page. Each item operates independently, allowing users to expand or collapse sections based on their interests.
+
+<AccordionItem slots="heading, text"/>
+
+### What are the benefits?
+
+Accordions help reduce page clutter by condensing information into expandable sections. This improves readability and helps users focus on the content that matters most to them.
+
+## Usage
+
+Use `slots` to identify the markdown content:
+
+- `heading` (required) - The title of the accordion item
+- `text` (required) - The body content
+
+Each `<AccordionItem>` component creates a collapsible section that users can expand or collapse by clicking on the heading.
+
diff --git a/src/pages/blocks/accordion/accordion-with-table-and-code.md b/src/pages/blocks/accordion/accordion-with-table-and-code.md
@@ -0,0 +1,124 @@
+---
+title: Accordion Block with Table and Code
+description: Complex accordion example with tables and code blocks for detailed technical documentation.
+---
+
+# Accordion with Table and Code Example
+
+This example demonstrates a complex accordion with multiple content types including tables, text descriptions, and code blocks. This is ideal for displaying structured data or step-by-step processes.
+
+Each step shown in the following accordion is described in detail below. Each description includes sample data that demonstrates the different content types available.
+
+## Accordion Heading
+
+<AccordionItem slots="heading, table, text, code"/>
+
+### 1. Initial Setup 
+
+| Step | Description | Duration | Status | Endpoint |
+| --- | --- | --- | --- | --- |
+| 1 | User initiates the process and the system begins loading resources | 0s | Starting | `/api/initialize` |
+
+This action represents the beginning of a workflow. The system state transitions from idle to active. A unique identifier is generated and returned to the client for tracking purposes. This identifier will be used in subsequent steps.
+
+```json
+{
+  "eventType": "process.start",
+  "timestamp": "2024-01-15T10:00:00.000Z",
+  "data": {
+    "sessionId": "abc123",
+    "config": {
+      "name": "Sample Process",
+      "timeout": 60,
+      "mode": "standard",
+      "version": "1.0.0"
+    }
+  }
+}
+```
+
+<AccordionItem slots="heading, table, text, code" />
+
+### 2. Loading Phase
+
+| Step | Description | Duration | Status | Endpoint |
+| --- | --- | --- | --- | --- |
+| 2 | System enters loading state while gathering resources | 1s | Loading | `/api/loading` |
+
+The process enters a waiting state while necessary resources are retrieved. Progress indicators may be displayed to the user during this phase.
+
+```json
+{
+  "eventType": "state.loading",
+  "timestamp": "2024-01-15T10:00:01.000Z",
+  "data": {
+    "sessionId": "abc123",
+    "progress": 0
+  }
+}
+```
+
+<AccordionItem slots="heading, table, text"/>
+
+### 3. Status Check
+
+| Step | Description | Duration | Status | Endpoint |
+| --- | --- | --- | --- | --- |
+| 3 | Periodic status update is transmitted | 10s | Active | `/api/heartbeat` |
+
+A routine status signal is sent to maintain the connection and confirm system health.
+
+
+<AccordionItem slots="heading, table, text, code"/>
+
+### 4. User Pause
+
+| Step | Description | Duration | Status | Endpoint |
+| --- | --- | --- | --- | --- |
+| 4 | User initiates a pause action | 15s | Paused | `/api/pause` |
+
+The user triggers a pause action, temporarily halting the current process.
+
+```json
+{
+  "eventType": "action.pause",
+  "timestamp": "2024-01-15T10:00:15.000Z",
+  "data": {
+    "sessionId": "abc123",
+    "counter": 12
+  }
+}
+```
+
+<AccordionItem slots="heading, table, text, code"/>
+
+### 5. End Session
+
+| Step | Description | Duration | Status | Endpoint |
+| --- | --- | --- | --- | --- |
+| 5 | User terminates the session before completion | 29s | Ended | `/api/end` |
+
+The user exits the application. A termination signal is sent to close the session immediately.
+
+```json
+{
+  "eventType": "process.end",
+  "timestamp": "2024-01-15T10:00:29Z",
+  "data": {
+    "sessionId": "abc123",
+    "counter": 17
+  }
+}
+```
+
+## Usage
+
+Use `slots` to identify the markdown content for each `<AccordionItem>`:
+
+- `heading` (required) - The title of the accordion item
+- `table` (optional) - Tabular data
+- `text` (optional) - Body text with descriptions
+- `code` (optional) - Code blocks with examples
+
+You can mix and match slots based on your content needs. Each accordion item can have different slot combinations.
+
diff --git a/src/pages/blocks/accordion/index.md b/src/pages/blocks/accordion/index.md
@@ -1,199 +1,24 @@
 ---
-title: Accordion Block Example
+title: Accordion Block
 description: Learn how to use the Accordion block to create collapsible content sections for organizing information in your documentation.
 ---
 
-# Accordion Block Example
+# Accordion Block
 
-Each timeline action shown in the previous table is described in detail below. Each description includes the payload that is sent as part of a Media Edge API request.
+The Accordion Block allows you to create collapsible content sections, making it easier to organize and present large amounts of information without overwhelming users. Accordion items can be expanded or collapsed individually, providing a clean and organized way to display content.
 
-## Accordion Heading
+## Available Slots
 
-<AccordionItem slots="heading, table, text, code"/>
+Each `<AccordionItem>` can use the following slots:
 
-### 1. Start play Test 
+- `heading` (required) - The title/header of the accordion item
+- `text` (optional) - Body text content
+- `table` (optional) - Table data
+- `code` (optional) - Code blocks
 
-| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request |
-| --- | --- | --- | --- | --- |
-| 1 | The auto-play function occurs, or play button is pressed, and the video starts loading | 0 | 0 | `/sessionStart?configId=<datastreamID>` |
+## Variants
 
-This call signals the intention of the user to play a video. The player state is not yet `playing`, but is instead `starting`. This call returns a Session ID which is referenced in the following examples with `{SID}`. The `{SID}`, is returned to the client and is used to identify all subsequent tracking calls within the session.  This call also generates a reporting event that is pushed to AEP and/or Analytics, depending on datastream configuration. Mandatory parameters must be included.
-
-```json
-{
- "eventType": "media.sessionStart",
-  "timestamp": "YYYY-MM-DDT02:00:00.000Z",
-  "mediaCollection": {
-    "playhead": 0,
-    "sessionDetails": {
-      "name": "VA API Sample Player",
-      "friendlyName": "ClickMe",
-      "length": 60,
-      "contentType": "VOD",
-      "playerName": "sample-html5-api-player",
-      "channel": "sample-channel",
-      "appVersion": "va-api-0.0.0"
-    }
-  }
-}
-```
-
-<AccordionItem slots="heading, table, text"/>
-
-### 2. Ping event timer
-
-| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request |
-| --- | --- | --- | --- | --- |
-| 2 | The ping event timer starts | 0 | 0 | `/ping?configId=<datastreamID>` |
-
-The application starts the [ping timer](https://experienceleague.adobe.com/docs/media-analytics/using/implementation/analytics-only/streaming-media-apis/mc-api-impl/mc-api-sed-pings.html). A call is not sent for this event, but the first ping call should be fired 10 seconds later.
-
-
-<AccordionItem slots="heading, table, text, code" />
-
-### 3. Track buffer start
-
-| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request |
-| --- | --- | --- | --- | --- |
-| 3 | Tracks the buffer start | 1 | 1 | `/bufferStart?configId=<datastreamID>` |
-
-Player enters the `buffering` state. Because content is not being played the playhead is not advancing.
-
-```json
-{
-  "eventType": "media.bufferStart",
-  "timestamp": "YYYY-MM-DDT02:00:01.000Z",
-  "mediaCollection": {
-    "sessionID": "{SID}",
-    "playhead": 0
-  }
-}
-```
-
-<AccordionItem slots="heading, table, text, code"/>
-
-### 4. Track buffer end
-
-| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request |
-| --- | --- | --- | --- | --- |
-| 4 | Tracks the end of the buffer and a play event is sent | 4 | 1 | `/play?configId=<datastreamID>` |
-
-Player buffering ends after 3 seconds so a `play` call is sent to put the player into the `playing` state. Sending a `play` call after the `bufferStart` call has been sent automatically ends the `buffering` state.
-
-```json
-{
-  "eventType": "media.play",
-  "timestamp": "YYYY-MM-DDT02:00:04.000Z",
-  "mediaCollection": {
-    "sessionID": "{SID}",
-    "playhead": 1
-  }
-}
-```
-
-<AccordionItem slots="heading, table, text, code"/>
-
-### 5. Ping
-
-| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request |
-| --- | --- | --- | --- | --- |
-| 5 | Sends a ping | 10 | 7 | `/ping?configId=<datastreamID>` |
-
-A ping call is sent to the backend every 10 seconds.
-
-```json
-{
-  "eventType": "media.ping",
-  "timestamp": "YYYY-MM-DDT02:00:10.000Z",
-  "mediaCollection": {
-    "sessionID": "{SID}",
-    "playhead": 7
-  }
-}
-```
-
-<AccordionItem slots="heading, table, text, code"/>
-
-### 6. User pauses
-
-| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request |
-| --- | --- | --- | --- | --- |
-| 6 | User presses `pause` | 15 | 12 | `/pauseStart?configId=<datastreamID>` |
-
-The user pauses the video. This moves the play state to `paused`.
-
-```json
-{
-  "eventType": "media.pauseStart",
-  "timestamp": "YYYY-MM-DDT02:00:15.000Z",
-  "mediaCollection": {
-    "sessionID": "{SID}",
-    "playhead": 12
-  }
-}
-```
-
-
-<AccordionItem slots="heading, table, text, code"/>
-
-### 7. Ping
-
-| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request |
-| --- | --- | --- | --- | --- |
-| 7 | Sends a ping | 20 | 12 | `/ping?configId=<datastreamID>` |
-
-A ping call is sent to the backend every 10 seconds. The player remains in a `paused` state.
-
-```json
-{
-  "eventType": "media.ping",
-  "timestamp": "YYYY-MM-DDT02:00:20.000Z",
-  "mediaCollection": {
-    "sessionID": "{SID}",
-    "playhead": 12
-  }
-}
-```
-
-<AccordionItem slots="heading, table, text, code"/>
-
-### 8. User presses play
-
-| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request |
-| --- | --- | --- | --- | --- |
-| 8 | User presses `play` to resume the main content | 24 | 12 | `/play?configId=<datastreamID>` |
-
-The user presses `play`. This moves the play state to `playing`. There is no need for a separate `resume` event.
-
-```json
-{
-  "eventType": "media.play",
-  "timestamp": "YYYY-MM-DDT02:00:24.000Z",
-  "mediaCollection": {
-    "sessionID": "{SID}",
-    "playhead": 12
-  }
-}
-```
-
-<AccordionItem slots="heading, table, text, code"/>
-
-### 9. User closes player
-
-| Number | Action | Elapsed Real-Time (from beginning) | Playhead Position | Client Request |
-| --- | --- | --- | --- | --- |
-| 9 | User closes the app without watching the content to the end | 29 | 17 | `/sessionEnd?configId=<datastreamID>` |
-
-The user closes the app. `sessionEnd` is sent to the Media Edge API to signal that the session should be closed immediately, with no further processing.
-
-```json
-{
-  "eventType": "media.sessionEnd",
-  "timestamp": "YYYY-MM-DDT02:00:29Z",
-  "mediaCollection": {
-    "sessionID": "{SID}",
-    "playhead": 17
-  }
-}
-```
+There are 2 different variants based on complexity:
 
+- The [basic accordion](accordion-basic.md) variant for simple collapsible text sections, ideal for FAQs or simple content.
+- The [accordion with table and code](accordion-with-table-and-code.md) variant for complex content including tables and code blocks, ideal for API documentation or detailed technical content.