Expand/collapse text to show more details

[sarahc_WellingtonCounty]

Hi there, 

I'm looking to create an interactive FAQ page for my site (created with Experience Builder in AGOL). Ideally I'd like to have a list of questions listed on the page. When a question is clicked, the text element will expand below with the answer to the question. I've attached some screenshots that generally show what I'd like to accomplish.

Currently my FAQ page has all of the questions laid out, with their answers directly below. However I find the page looks quite cluttered. The current design is created using text elements, but I'm open to setting up the data as a table if there's any way to accomplish this with a data driven widget instead. 

Has anyone done something like this with Experience Builder? Open to any suggestions folks might have. 

Thank you!

[sarahc_WellingtonCounty · Accepted solution]

Just following up in case anyone comes across this post and is looking to do something similar. I wasn't able to achieve what I was originally hoping for, but I came up with another solution that (in my opinion) looks pretty great! 

Instead of an expandable section for the answers to the Qs, I decided to use a text element for the question. The text was then hyperlinked to open a fixed window that has the full Q&A listed. I had to create multiple fixed windows for each Q&A to make the page work, but it wasn't too much effort to do. I've attached screen shots so you can see what this looks like. 

I think I could have accomplished something similar using data driven widgets, but I didn't want to maintain the Q&As as a feature layer. However, that could be beneficial if you have an extensive list of Q&As or if you wanted to use them between different applications. 

Hope this helps someone else down the road! 

[CliffordDRutledge]

Agreed. I find myself in the exact same scenario and came to the very same conclusion that you have. Thanks for following up with the solution.