How to dynamically hide/show a DIV area in a custom row formatter

Question

I have a custom row formatter to display Q&A information in a list. I'd like for the display to show on Row 1 the Q, and Row 2 the A.

But - I want the initial view to not display any of the "A"s unless an element of Row 1 has been clicked.

Example below:

Q: How do I sort on a column in SharePoint. >>

When >> is clicked

Q: How do I sort on a column in a SharePoint library? >>

A: To sort - click the dropdown arrow next to the column name.

If you can provide a code snippet that triggers on click and changes the display mode from none to block, and block to none, that'd be very helpful.

Answer 1

You can change list view settings and group by on question column, then apply group view formatting as given in below sample:

Sample Reference: faq-accordion