SharePoint button expanding/collapsing text

Question

Hi,

I am currently trying to build a SharePoint page for my team on SharePoint Online Classic Experience. As part of that, I want to have two buttons to expand text hidden inside, one containing a large section of text that is optional to read for visitors if they want to know more, and the other containing a short FAQ. I have experimented with different "dynamic accordion" solutions proposed on the Internet, but they never succeed.

I finally have found a working solution in the form of a button, but that one also has problems:

https://pastebin.com/sX4rhYd1
(shared on pastebin because I cannot post the question otherwise)

So by embedding this code in the page (Script Editor), it creates a button titled "+ Long text" that, on clicking, reveals the two lines "longtext1" and "longtext2".

However, when I try to add the button again to build the FAQ, clicking either of the two buttons will only expand the text of the FAQ that was added. What do I need to do to make the two buttons independent from each other? Changing "hugetext" to something else does not work.

Could somebody please help?

Kind regards,
Mike

Answer 1

Hi @Mike Wazowski II ,

Please refer the following demo to build Accordion FAQ UI in SharePoint classic Page:

How to Create Dynamic Accordions in SharePoint Pages

In the page, add Header and text content like this:

Then add the script in the attachment file using Script Editor Web Part:

40984-accordion.txt

It will display the UI like this which should meet requirement:

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.