accordion Content example

The issue in a nutshell: We’d like to let users manage accordions in a flexible way, letting them reorder items, create new ones, etc.. The current version has preset values for id, aria-controls, and aria-labelled-by that make it accessible; if we let users create new items, they won’t be able to easily assign unique values to those attributes.

We’d like to add those values to the <button> and content <div> for each accordion item on page load with JS.

Here’s our accordion build, without those preset values; it works great, but presumably needs id, aria-controls, and aria-labelled-by for accessibility.

Update: This works great now. 🙂 

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique tempore odit delectus perferendis. Aliquid commodi molestiae ratione voluptas, consectetur ea blanditiis quas cupiditate sequi. Cum deleniti a exercitationem neque incidunt?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique tempore odit delectus perferendis. Aliquid commodi molestiae ratione voluptas, consectetur ea blanditiis quas cupiditate sequi. Cum deleniti a exercitationem neque incidunt?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique tempore odit delectus perferendis. Aliquid commodi molestiae ratione voluptas, consectetur ea blanditiis quas cupiditate sequi. Cum deleniti a exercitationem neque incidunt?

3-Column Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

3-Column Heading

Add text.

3-Column Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique tempore odit delectus perferendis. Aliquid commodi molestiae ratione voluptas, consectetur ea blanditiis quas cupiditate sequi. Cum deleniti a exercitationem neque incidunt?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique tempore odit delectus perferendis. Aliquid commodi molestiae ratione voluptas, consectetur ea blanditiis quas cupiditate sequi. Cum deleniti a exercitationem neque incidunt?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique tempore odit delectus perferendis. Aliquid commodi molestiae ratione voluptas, consectetur ea blanditiis quas cupiditate sequi. Cum deleniti a exercitationem neque incidunt?