Expandable Content aka Accordion

[FeXd]

Create a simple webpage using basic HTML, CSS, and JavaScript, that allows us to have a "Expandable Content" activity.

Example of existing activities are available in /source directory, specifically:

• Interactive Expandable Content Template

Please refer to #1 and #2 for more examples.

Implementation

• please make your files inside a folder directly in the root of the project, for example expandable-content
• inside should only be three files, index.html, script.js, style.css
• we are trying to create these examples as simply as possible, with vanilla JavaScript where possible (no 3rd party libraries)
• it is possible that a 3rd party library may be required, but please check in before you attempt to implement
• feel free to use the /source examples as a base for your implementation, but we do not want to be using jquery

Expectations

• there is no specific deadline for this task
• it is expected that you will check in daily on progress
• you should make a new branch on git and push your branch regularly
• when you are done, or when you want feedback, please open a pull request and let the team know

[FeXd]

The current example listed above look likes this:

This type of interface is also known as the accordion and there should be a lot of tutorials online for getting this done. The idea for us would be that the "Box Title" would be a question, and the answer would be placed inside the "Description Text Here" area.

Some possible tutorials:

• https://softauthor.com/accordion-menu-in-vanilla-javascript/
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
• https://www.w3schools.com/howto/howto_js_accordion.asp

It is possible that this could be done without any JavaScript, but I would prefer it ran off of JavaScript objects / JSON like the other examples. So the JavaScript might just be for generating, and not the actual show / hide functionality.

[Raunaq27]

This how it looks at the moment