50 Projects in 50 Days, Day 12: Collapsing FAQs

50 Projects in 50 Days, Day 12: Collapsing FAQs

This was another fairly short project from the 50 Projects in 50 Days course that achieves a cool effect mainly through just CSS.

The general idea here is to have the questions display all the time, and to have the answer as a separate body of text that only appears when the user clicks the down arrow. (The down arrow and the 'X' close symbol, along with the conversation bubbles that are in the background of the answer boxes, are all from Font Awesome which you can read more about in Project 3, the Rotating Navigation Menu).

Beyond the styling, all that's going on with JavaScript is to add event listeners to the down arrow and close buttons that toggle whether or not the current answer block is visible.

My Project: Collapsing FAQs