Auto-hide text under heading titles

[aidanheerdegen]

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

Specialist medical travel insurance FAQs | Free Spirit

Frequently asked questions

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.

[JammyDodger]

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

---

[aidanheerdegen]

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