[Functionality] Research, design, and scope an implementation of Accordions for use within the Vocabulary design system

[possumbilities]

Description

The need for such a feature is outlined in:

• [Feature] Add support for accordions #55

However, there are myriad of approaches worth considering and there needs to be more focused work before fully implementing such a feature.

This Issue would need to house the findings and direction for such a feature more specifically.

Implementation

• I would be interested in implementing this feature.

[OmarAmeen01]

@possumbilities

here is my opinion I am open for changes and adjustments required
this component needs to be as general as possible with minimum adjustments needed and that even should be achieved with out introducing more complexity to the codebase for that what I'm suggesting is

make a component containing the structure of the accordion like this

   <article>
    <h1 >Frequently asked Questions</h1>
       <button aria-expanded="false"  class="accordion-header" aria-controls="answer1">Question you might have?
           <img src="chevron.svg" alt="" class="accordion-chevron">
       </button>
   <p id="answer1" class="hidden" role="region" aria-labelledby="question1">Answer to the question</p>

we will provide this component in the documentation from where user can copy it and paste it in thier code
then we will write the css and js logic for the accordion in src folder of vocabulary and also provide svg for the chevron of accordion so when user inserts the element into his code using vocabulary he wont have to worry about the css and js just pasting the component as its will do the magic and user can change the inner html of the element according to his choice

[possumbilities]

With the advent of the faqs table of contents, and the new chooser marking formats section handling within it would probably stand as sound to incorporate the use of details and summary within semantically appropriate circumstances for this behavior within Vocabulary more generally.