Portfolio

Accessible Vanilla JavaScript Accordion on Sleep Doctor Web Page

While working as a Software Engineer with Sleep Doctor, I added a References WordPress block at the bottom of multiple pages (like sleepdoctor.com/sleep-apnea/) that includes a web-accessible accordion with a See More button. This accordion can even be opened and closed when navigating to the See More button using the keyboard (Tab key or Shift + Tab keys) and then pressing Space or Enter on your keyboard.

To make this happen, I converted a Figma mockup into code using Vanilla JavaScript, SCSS (a type of Sass), PHP, and HTML and used BrowserStack.com (to test on popular devices, like iPads and mobile phones).

See Sleep Apnea page on SleepDoctor.com >>

Web Developer: Matt Jennings.

Technologies Used:

Figma, JavaScript, SCSS (a type of Sass), PHP, WordPress blocks, and HTML, and used BrowserStack.com (to test on popular devices, like iPads and mobile phones).

Accessible accordion that is closed

Accessible accordion that is open


To Top ↑