How do I add a button in Sharepoint that when clicked display text below it?

Question

I'm in the process of updating our main page and we have a FAQ section. Right now we have a hyperlink that is the question and when clicked, it takes the user to a sharepoint pdf that has the answer. I'm looking for suggestions on how the below screenshot can be accomplished or if SharePoint even has this functionality?

Below is our current sharepoint setup:

Answer 1

As you are using SharePoint Online, I will suggest you to create a SharePoint Framework webpart for your requirements.

Check below official documentation of adding JQuery accordion in SPFx webpart:

Add jQueryUI Accordion to your SharePoint client-side web part.

Note:

This webpart is using static data to show in accordion. So:

1. You can create a SharePoint list and add all your FAQs in that.
2. Then use SharePoint REST APIs (SPHTTPModule or PnPJS) to fetch the list items and then show it in accordion.

Retrieve SharePoint List Items Using SharePoint Framework Development Model.

Update:

If you are using classic Sharepoint maybe 2019/2016/2013 then you can check below some samples to achieve something similar:

1. Implementation Of Jquery Accordion For SharePoint List Data - Using JSOM.
2. Displaying items using JQuery Accordion Widget - Using REST APIs.