Auto-hide text under heading titles

AI-generated summary

The discussion revolves around the idea of auto-hiding text under heading titles, similar to the mobile Wikipedia interface. aidanheerdegen wants to create an FAQ topic where answers are hidden and can be revealed by clicking on the question. He suggested using the details HTML element, but noted that styling in the header text is not supported.

Aidanheerdegen then provided an example of how this could be achieved. However, JammyDodger provided a solution using HTML, where questions are wrapped in <big> tags and answers are hidden under a <details> element. This solution seems to meet aidanheerdegen’s requirements, who expressed gratitude for the help.

I’d like to have an FAQ topic where as many of the questions are visible as possible, to allow easy browsing by users. One way to achieve this is to hide the text of the answers and just click on the question to reveal the answer text.

This is similar to the way the mobile Wikipedia interface works.

Here are some other examples

One way to achieve this is to use details

But as far as I know styling isn’t supported in the details header text, so it is difficult to make it stand-out.

What I’d like is to have the questions as headings and the text below each question be revealed when the heading text is clicked.

Is this something that is easily achievable? Note I am on a hosted plan.

I’ve used html rather than markdown with some success before, though I’ve used <big> rather than <h3> to avoid the new line issue but still have larger titles. Something like this:

<hr>
<details>
<summary>
<big> Question </big>
<hr>
</summary>

This is an answer

<hr>
</details>

<details>
<summary>
<big> Question </big>
<hr>
</summary>

This is an answer 

<hr>
</details>

<details>
<summary>
<big> Question </big>
<hr>
</summary>

This is an answer

<hr>
</details>

Question

This is an answer


Question

This is an answer


Question

This is an answer


Awesome! That looks to be just the ticket. Thanks.