Expandable text sections in Avenue, like in Wikipedia mobile?

Hello everyone. In Avenue, we are looking for a way to allow readers to expand sections of text by clicking on headings or subheadings. The mobile version of Wikipedia offers a perfect illustration of this functionality: when you click on a heading, the body text appears. Click the heading again and the body text hides. On Wikipedia mobile, those headings look like this when the body text is hidden ? Heading and like this when the body text is displayed ? Heading. Thank you!

The question has been asked before and a good answer with explanations given. How can I create accordion style hide/show blocks of text?. For the source article cited in that question, see Sandeep's Nook: JavaScript Page

Another question here that had a different solution is Five: Making FAQ page accordion style?. This one uses markdown blocks and some script provided by @silvabokis; see his site at silvabokis.com.

Another solution, this one to hide/show not just text but graphics also, is at How do I create hide/show section of an entire page of text, images and or galleries in Squarespace (spoiler function/accordian/collapse)?.

Perhaps the earliest answer on this forum to this question is again by @silvabokis in the thread How do I create hide/show text on a page, like you see with FAQs?. There is good discussion by and contributions from others.

See also How to tweak this code for hide/show text toggle?.

I amended the answer to include further results from further research.

Thank you very much for this answer!

Oops, I see the special characters did not display in my question. Instead of the question marks (? Heading), there should be an arrow pointing up and and arrow pointing down.

You're quite welcome. Do me a favor please and accept the answer and vote it up.