Having the FAQ close button show a different symbol

Per our tutorial on layout blocks on youtube, layout blocks make it possible to create an accordion, for example for a FAQ section.

A common issue that’s raised is that you then can’t have a different symbol on the close action on the button.

Here’s a way to address that.

What you do is you overlap the answer on top of the question layout block, then make the answer layout block transparent, and fill it in with the answer content. You then have the opportunity to layer a second button exactly on top of the first, making it have a different look/layout/graphic. So it’s not about changing the open button graphic, it’s about putting a second close button (with its own graphic) that hides the open button.

It’s a bit annoying to deal with overlapping layers, and particularly layout blocks, but visually it works. Until we have a better solution.

Here’s the sample project.

faq-sample.sitely (108 KB)

3 Likes