Answers to common questions
Learn about Prismic by reading questions and answers. It’s almost like talking to a human – and maybe even better.
Only use them when the content is appropriate. If the panels are too long, the user will end up scrolling too much (esp. on mobile), which negates the whole purpose of using an accordion. For very long panels, using links to separate pages is preferred.
The default markup is enhanced using JavaScript so that the buttons are added to the headings. The buttons should NOT be in the headings by default. The markup should always consider what the component or content would look like if no Javascript is enabled and therefore the accordion is not functional. The content is most likely going to be all visible — either as a series of panels with headings or a definition list, depending on the type of content.
The buttons need to specify which panels they control usingaria-controls, and they need to reflect the state of the panel (collapsed/expanded) usingaria-expanded="true/false". The panel itself also should havearia-hiddenset to true or false if it is hidden or shown, respectively.
You can allow one or more panels to be always collapsed or expanded. You can also set a panel to be open by default (e.g. the first one). All this functionality can be tied to the markup using data attributes as flags.