Code
Snippet
/ 

Toggle Accordion Attributes for Accessibility

View 
 
Snippet
*
 ↗
View 
Snippet
 ↗
Toggle Accordion Attributes for Accessibility

Enhance the accessibility of an accordion component by toggling an aria-expanded attribute when the accordion is opened or closed.

​

.accordion-trigger would be the button that triggers the accordion to open and close on click, and should start with an attribute of aria-expanded="false" that is set within the Webflow Designer. The direct sibling element to the trigger would have the class of .accordion-content and is what is changed with interactions to be hidden/shown and size is set to 0/auto.

​

For another great accessible accordion example see: https://webflow.com/accessibility/checklist/task/ensure-accordions-are-keyboard-navigable

Tags

Javascript
Accessibility

Industries

Creators

Corey Moen

Share this item

Twitter
Facebook
LinkedIn

Related items

Load more

Have feedback or a question related to this item? Drop us some feedback!

Curated: 
3.29.21

Similar items

Items
0
Layout
Grid View
Row View
Preview
↗

Advertise with No-Code Supply Co.

Promote your product (or yourself!) to our engaged audience looking for recommendations.
View item
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Opal
Inspo
Website
/ 

Opal

11.22.24
SAAS, Mobile Apps, Landing, Webflow
Marimain
Inspo
Website
/ 

Marimain

11.22.24
Food & Beverage, Restaurant, Landing, Webflow
Golden Goose
Inspo
Website
/ 

Golden Goose

11.22.24
Creative, Agency, Portfolio, Webflow
eBay Playbook
Inspo
Website
/ 

eBay Playbook

11.21.24
Creative, Design System, Brand Guide
Gentlerain
Inspo
Website
/ 

Gentlerain

11.21.24
AI, Education, Landing, Scrollytelling, Webflow, GSAP (Greensock)
Hello Patient
Inspo
Website
/ 

Hello Patient

11.21.24
Medical, AI, SAAS, Marketing, Webflow
Design Gal Studio
Inspo
Website
/ 

Design Gal Studio

11.21.24
Creative, Personal, Portfolio, Framer
Bike in Portugal
Inspo
Website
/ 

Bike in Portugal

11.19.24
Sports, Marketing, Webflow, GSAP (Greensock)
Updating Our Web System For A New Era
Learn
Article
/ 

Updating Our Web System For A New Era

11.19.24
Creative, Design System, Workflow, Figma
OpusClip
Tools
App
/ 

OpusClip

11.19.24
AI, Social Media, Landing, Video, Webflow
Ramona Bizbac
Inspo
Website
/ 

Ramona Bizbac

11.19.24
Fashion, Marketing, Webflow, Nicola Romei
Teletech
Inspo
Website
/ 

Teletech

11.18.24
Events, Music, Marketing, Webflow, GSAP (Greensock)
Circuit
Inspo
Website
/ 

Circuit

11.16.24
Security, Landing, Webflow, Mast
Mast
Featured
Tools
Framework
/ 

Mast

3.13.23
No-code, Creative, Dev Tools, CSS, Workflow, Design System, Extending, Why Webflow, Webflow, HARA, Rotor, Gantry, No-Code Supply Co.
Griffo House
Inspo
Website
/ 

Griffo House

11.15.24
Creative, Agency, Portfolio, Webflow
How to Grow & Scale Your Business With Webflow
Learn
Article
/ 

How to Grow & Scale Your Business With Webflow

$50
11.15.24
Creative, No-code, Writing, Workflow, Webflow, Edgar Allan
Startups Gallery
Inspo
Website
/ 
Directory

Startups Gallery

11.15.24
SAAS, Technology, Gallery, Framer
Whalesync
Partner
Tools
App
/ 

Whalesync

1.8.23
CMS, Database, Extending, Automation, Where Whalesync Really Wails, "100 SEO pages in 20 minutes with OpenAl + Webflow + Whalesync", Notion, Webflow, Airtable, Bubble
Jetboost
Partner
Tools
App
/ 

Jetboost

12.3.19
No-code, CMS, Search, Assets, Extending, Jetboost List Update Function
Flow Growth by MakeBuild
Learn
Article
/ 
Website

Flow Growth by MakeBuild

11.12.24
No-code, SEO, Forms, Workflow, Webflow
Jamey Gannon
Inspo
Website
/ 

Jamey Gannon

11.12.24
Creative, Personal, Portfolio, Framer
How to think for yourself
Learn
Article
/ 

How to think for yourself

11.12.24
Creative, Collaboration , Workflow
Owner
Inspo
Website
/ 

Owner

11.12.24
Food & Beverage, SAAS, Financial, Marketing, Webflow
Lamatic.ai
Inspo
Website
/ 
App

Lamatic.ai

11.12.24
AI, SAAS, Dev Tools, No-code, Marketing, Webflow
Shaga Odyssey
Inspo
Website
/ 

Shaga Odyssey

11.12.24
Gaming, Web3, Landing, Scrollytelling, Webflow
Flighty
Inspo
Website
/ 

Flighty

11.12.24
Travel, Mobile Apps, Landing, Framer
11x AI
Inspo
Website
/ 

11x AI

11.12.24
AI, SAAS, Marketing, Webflow
Travel Next Level
Inspo
Website
/ 

Travel Next Level

11.12.24
Travel, Gallery, Webflow, Memberstack
Fathom Analytics
Partner
Tools
App
/ 

Fathom Analytics

12.1.22
Analytics
Audienceful
Partner
Tools
App
/ 
Website

Audienceful

8.1.22
SAAS, No-code, Email, CMS, Marketing, Automation, Webflow
Lapz
Inspo
Website
/ 

Lapz

11.7.24
Transportation, Sports, Technology, Landing, Scrollytelling, 3D, Webflow
Unblocked AI Figma Plugin
Tools
Utility
/ 

Unblocked AI Figma Plugin

11.7.24
Creative, AI, Assets, Workflow, Figma
Onx UI
Tools
Utility
/ 
Website

Onx UI

11.7.24
Creative, No-code, Components, Gallery, Workflow, Webflow, Mast
Memberstack
Tools
App
/ 

Memberstack

12.3.19
No-code, SAAS, Authentication, Memberships, Extending, Backend, Custom Code, Webflow
Slater
Tools
App
/ 

Slater

6.2.23
AI, Custom Code, Extending, Workflow, Webflow, Edgar Allan, 473
Webflow With Cloudflare Proxy On (My New Kickass Method!)
Learn
Article
/ 

Webflow With Cloudflare Proxy On (My New Kickass Method!)

10.30.24
No-code, Dev Tools, Proxy, Workflow, Hosting, Assets, Webflow, Using Webflow with Cloudflare
1-800-D2C
Inspo
Website
/ 
Directory

1-800-D2C

10.30.24
SAAS, App, Gallery, Shopify, Webflow
Perplexity Supply
Inspo
Website
/ 

Perplexity Supply

10.30.24
AI, Creative, Apparel, Ecommerce, Framer, Shopify
Glyphic
Inspo
Website
/ 

Glyphic

10.30.24
SAAS, AI, Marketing, Webflow
Wand
Inspo
Website
/ 
App

Wand

10.30.24
Creative, 3D, Workflow, Landing, Webflow
Outseta
Tools
App
/ 
Website

Outseta

8.13.20
No-code, SAAS, Authentication, Memberships, Extending, Ecommerce, Webflow
Check
Inspo
Website
/ 

Check

10.29.24
Financial, HR, SAAS, Marketing, Webflow
Flow Sparrow
Inspo
Website
/ 

Flow Sparrow

10.29.24
Creative, No-code, Agency, Portfolio, Webflow
FlowMapp
Tools
App
/ 
Website

FlowMapp

10.29.24
Creative, SAAS, Dev Tools, Website Builder, Agency, Workflow, Webflow
Popcorn
Inspo
Website
/ 

Popcorn

10.29.24
Technology, SAAS, Landing, Webflow
Autopilot
Inspo
Website
/ 

Autopilot

10.29.24
Travel, SAAS, Landing, Webflow
ShareClub
Inspo
Website
/ 

ShareClub

10.29.24
Financial, Marketing, Webflow
Fitonist App
Inspo
Website
/ 

Fitonist App

10.29.24
Fitness, Mobile Apps, Landing, Scrollytelling, Webflow
Wayfinder Ventures
Inspo
Website
/ 

Wayfinder Ventures

10.29.24
Financial, Technology, Marketing, Webflow
Groteskly Yours Studio
Tools
Fonts
/ 

Groteskly Yours Studio

10.28.24
Creative, Fonts, Gallery
Reweb
Tools
App
/ 

Reweb

10.27.24
Dev Tools, Website Builder, Javascript, CSS
MINO
Inspo
Website
/ 

MINO

10.27.24
Creative, Architecture, Assets, Agency, Portfolio, Framer
Load more

Bummer, no results

Try a different search/filter combo, or drop us some feedback if there is something missing you would love to see!

Reset filters

Subscribe for updates

Get updates on the latest curated resources and be the first to hear of new features.