Share via

SharePoint button expanding/collapsing text

Mike Wazowski II 1 Reputation point
2020-11-18T13:07:25.977+00:00

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

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,105 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Jerryzy 10,566 Reputation points
    2020-11-19T03:22:32.627+00:00

    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:

    40879-snipaste-2020-11-19-11-20-15.png

    40944-textcontent.png

    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:

    40880-completed-dynamic-accordions2-1.gif

    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.