Expand/collapse text to show more details

Question

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!

FAQ_Example__Collapsed.png

FAQ_Example__Expanded.png

sarahc_WellingtonCounty · Accepted Answer

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!

KevinMayall_COH · Accepted Answer

You might want to check out the Accordion Widget launched in November 2024.