Accordion Component Standardization

[RobertaFricker]

Overview

As a part of the Dev team's efforts to standardize components throughout the website, we need to standardize the accordion component. The JavaScript code needs to be standardized, and some changes with how the JavaScript manipulates the accordion styles needs to be changed. There are also some style issues with the accordion component that need to be fixed. On the 2FA page on the website, the accordion component in the FAQ section stretches farther than the card in the tablet view range.

Action Items

• Take JavaScript code for the accordion out of getting-started.html and 2FA.html, and move the JavaScript code into the elements folder. The final result should be js code in the following file /assets/js/elements/accordion.js
• Once there is an assets/js/elements/accordion.js, you need to include it into the pages/getting-started.html and guide-pages/2FA.html via the script tag like so. <script src="/assets/js/elements/accordion.js" type="module"></script>. You will place it where the previous <script> containing the accordion logic was.
• Move any accordion related style classes from _getting-started-page.scss and 2FA.scss into a new file called _accordion.scss in the elements folder.
• Change the JavaScript code so that it adds a style class called "show" when the accordion is opened, and when closed it removes that class, rather than having the JavaScript code add the styles directly.
• As per comment Develop Updated Getting Started page #1619 (comment), the accordion arrows need to be made pink in all viewport ranges.

Resources/Instructions

Current uses of accordion on website

https://www.hackforla.org/getting-started
https://www.hackforla.org/guide-pages/2FA

Relevant files

https://github.com/hackforla/website/blob/gh-pages/_guide-pages/2FA.html
https://github.com/hackforla/website/blob/gh-pages/pages/getting-started.html
https://github.com/hackforla/website/blob/gh-pages/_sass/components/guide-pages/2FA.scss
https://github.com/hackforla/website/blob/gh-pages/_sass/components/_getting-started-page.scss
Figma Design 2FA (black border)

Below are screenshots of the behavior of the FAQ section when it's resized above 958 left-right:

[akibrhast]

Roberta's Comment
Danielle's Comment

@daniellex0 @RobertaFricker
Though I'm not sure I completely followed Roberta's comment, from what I saw, the min-width is creating an issue and I don't think min-width needs to be there at all—nothing else changed at other screen sizes when min-with was taken out.

• Note: I did not take into account any other pages, as I worked it out via dev tools on the live site, and not through a locally hosted site.

Live site _with_ min-width: 835px

with-min-width.mov

Live site _without_ min-width

no-min-width.mov

@erikaBell -

#1406 (comment)

[akibrhast]

I believe @erikaBell is correct that min-width: 835px is not necessary. However, this specific styling is coming from _getting-started-page.scss, and not from 2FA.scss. I am not 100% sure if removing this min-width would mess anything up from the getting-started page - @averdin2
#1406 (comment)

[akibrhast]

@averdin2 @erikaBell Really sorry about the delay- hmmm this is so strange, earlier when I was checking and disabled min-width the accordion seemed to get messed up, but now that I'm testing it everything seems fine... So do you think min-width is not serving any purpose at all?

I will say, it does seem strange that it's min-width. If anything, I'd expect a max-width.. - @daniellex0
#1406 (comment)

[akibrhast]

The comments above are a continuation of the discussion regarding an issue found during this PR between @averdin2 , @erikaBell , @daniellex0 -> #1406