Respond to User Interaction

The original plan for Studio$54$X$$s FAQ page was to enable users to click the answer, toggling between the full$-$length and short answer.

In the previous module$$s project, you only implemented a way to display the longer answer once clicked; since you did not know about states and conditionals at the time, you weren$$t able to implement the toggle that would allow you to return to the shorter answer with an additional click.

For this module$$s project, you will now attempt to implement the original plan, including the toggle between full and short answers. We have updated the HTML to signal to the user that the FAQ can collapse after expanded $($using the $"-$ LESS..." text$).$

Instructions

Implement the functionality mentioned above by editing the $$scripts$/$show$\_$hidden.js$$ file. We have cleared the js file for you, but we have left the link to the script file in the HTML document. We also retained the $.$hidden class for you in the CSS$.$ Make sure you review all the files before starting.

Don$$t forget the format of conditional statements:

HINT: Once you figure out how to implement this feature for one question, it will work the same for all others. Here is the logic we determined in the last module$$s project: when the FAQ is clicked, the longer answer appears and the shorter answer disappears.

HINT: Your strategy should look something like this:

IF $$more$$ is shown

THEN hide $$more$$ and show $$less$$

ELSE show $$more$$ and hide $$less$$