ampproject / ampproject/amphtml

AMP email `amp-accordion` documentation examples not working

Open
#38,246 3 comments 0 reactions 0 assignees View on GitHub
Component: amp-accordion P3: When Possible Related to: Documentation Stale Type: Bug WG: components
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

### Description

**Bug issue 1**. All 6 amp-accordion preview examples for AMP email are not working correctly in the [docs page](https://amp.dev/documentation/components/amp-accordion/?format=email).

- **Expected behavior**: when you click on the "Section 1", "Section 2", or "Section 3", it should drop down and display the text or image content.
- **Current behavior**: clicking on the different sections doesn't display the text or image content.

**Bug issue 2**. For the [[data-expand] amp-accordion AMP email example](https://amp.dev/documentation/components/amp-accordion/?format=email#[data-expand]), the ["Open this snippet in playground" example](https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fcomponents%2Famp-accordion.example.4.html%3Fformat%3Demail&format=email) is not working correctly.

- **Expected behavior**: "Expand section 1" button will expand and display section 1 content; "Collapse section 1" will collapse section 1
- **Current behavior**: Both buttons are not working.

The amp-bind script line is missing in the tag:

``

If you add that in, the [amp-accordion example](https://playground.amp.dev/?runtime=amp4email&mode=Responsive#share=PCFkb2N0eXBlIGh0bWw+CjxodG1sIOKaoTRlbWFpbCBkYXRhLWNzcy1zdHJpY3Q+CjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICA8c2NyaXB0IGFzeW5jIHNyYz0iaHR0cHM6Ly9jZG4uYW1wcHJvamVjdC5vcmcvdjAuanMiPjwvc2NyaXB0PgogIDxzY3JpcHQgYXN5bmMgY3VzdG9tLWVsZW1lbnQ9ImFtcC1iaW5kIiBzcmM9Imh0dHBzOi8vY2RuLmFtcHByb2plY3Qub3JnL3YwL2FtcC1iaW5kLTAuMS5qcyI+PC9zY3JpcHQ+CiAgPHNjcmlwdCBhc3luYyBjdXN0b20tZWxlbWVudD0iYW1wLWFjY29yZGlvbiIgc3JjPSJodHRwczovL2Nkbi5hbXBwcm9qZWN0Lm9yZy92MC9hbXAtYWNjb3JkaW9uLTAuMS5qcyI+PC9zY3JpcHQ+CiAgPHN0eWxlIGFtcDRlbWFpbC1ib2lsZXJwbGF0ZT5ib2R5e3Zpc2liaWxpdHk6aGlkZGVufTwvc3R5bGU+CjwvaGVhZD4KPGJvZHk+Cgo8YW1wLWFjY29yZGlvbj4KICA8c2VjdGlvbgogICAgW2RhdGEtZXhwYW5kXT0ic2VjdGlvbk9uZSIKICAgIG9uPSJleHBhbmQ6QU1QLnNldFN0YXRlKHtzZWN0aW9uT25lOiB0cnVlfSk7Y29sbGFwc2U6QU1QLnNldFN0YXRlKHtzZWN0aW9uT25lOiBmYWxzZX0pIgogID4KICAgIDxoMj5TZWN0aW9uIDE8L2gyPgogICAgPHA+QnVuY2ggb2YgYXdlc29tZSBjb250ZW50PC9wPgogIDwvc2VjdGlvbj4KICA8c2VjdGlvbj4KICAgIDxoMj5TZWN0aW9uIDI8L2gyPgogICAgPGRpdj5CdW5jaCBvZiBhd2Vzb21lIGNvbnRlbnQ8L2Rpdj4KICA8L3NlY3Rpb24+CiAgPHNlY3Rpb24+CiAgICA8aDI+U2VjdGlvbiAzPC9oMj4KICAgIDxkaXY+QnVuY2ggb2YgYXdlc29tZSBjb250ZW50PC9kaXY+CiAgPC9zZWN0aW9uPgo8L2FtcC1hY2NvcmRpb24+CjxidXR0b24gb249InRhcDpBTVAuc2V0U3RhdGUoe3NlY3Rpb25PbmU6IHRydWV9KSI+RXhwYW5kIHNlY3Rpb24gMTwvYnV0dG9uPgo8YnV0dG9uIG9uPSJ0YXA6QU1QLnNldFN0YXRlKHtzZWN0aW9uT25lOiBmYWxzZX0pIj5Db2xsYXBzZSBzZWN0aW9uIDE8L2J1dHRvbj4KPC9ib2R5Pgo8L2h0bWw+) will work correctly.

### Reproduction Steps

**Bug issue 1:**
1. Go to [amp-accordion documentation page](https://amp.dev/documentation/components/amp-accordion/?format=email#example) for AMP email
2. Click "Section 1", "Section 2", or "Section 3" for any of the amp-accordion examples. The sections are supposed to expand.

![Screen Shot 2022-05-26 at 8 26 17 PM](https://user-images.githubusercontent.com/6575035/170604884-9cc3d75d-28cd-4b93-b753-93c5cee473b2.png)

**Bug issue 2:**
1. Go to [amp-accordion.example.4](https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fcomponents%2Famp-accordion.example.4.html%3Fformat%3Demail&format=email)
2. Click on "Expand section 1" and "Collapse section 1" - both buttons are not working.

![Screen Shot 2022-05-26 at 8 25 16 PM](https://user-images.githubusercontent.com/6575035/170604809-e5a2e045-a374-4a7a-8679-5617dfb5a06f.png)

### Relevant Logs

_No response_

### Browser(s) Affected

Chrome, Firefox

### OS(s) Affected

_No response_

### Device(s) Affected

_No response_

### AMP Version Affected

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the AMP email amp-accordion documentation page and the referenced amp-accordion.example.4 playground example, then inspect how the examples load their AMP components. Verify the six previews expand their sections and that both buttons in example 4 work in Chrome and Firefox; those behaviors define done.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, javascript
Domain
documentation
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.