FAQ drop down boxes

**trnhockey** · 16 October 2019, 12:18 AM

Does anyone know if it's possible to make drop down areas for a FAQ page, formatted with Q's collapsed, like this one: https://hamiltonexhibition.com/faq/

Can't figure out a way to do this with my Xara Web Designer Premium

...

Thanks, Todd

**trnhockey** · 16 October 2019, 03:22 AM

ANYONE??

**Acorn** · 16 October 2019, 09:21 AM

Time zones Todd.

You are seeing a vertical accordion.

Not possible in native Xara unless you want to add scores of pop-up layers. Look at https://www.talkgraphics.com/showthr...370#post581370.

I created a CSS3 approach here: https://www.talkgraphics.com/showthr...250#post600250. Use the https://accordionslider.com/ and put <head> code in the Placeholder HTML code (head) and the remainder in the HTML code (body). You cannot use Xara for formatting of the FAQs and have to use HTML coding instead.

Acorn

**trnhockey** · 16 October 2019, 10:36 AM

Originally Posted by Acorn

Time zones Todd.

You are seeing a vertical accordion.

Not possible in native Xara unless you want to add scores of pop-up layers. Look at https://www.talkgraphics.com/showthr...370#post581370.

I created a CSS3 approach here: https://www.talkgraphics.com/showthr...250#post600250. Use the https://accordionslider.com/ and put <head> code in the Placeholder HTML code (head) and the remainder in the HTML code (body). You cannot use Xara for formatting of the FAQs and have to use HTML coding instead.

Acorn

ACORN YOU'RE AWESOME AS ALWAYS, i'LL TRY THIS OUT LATER TODAY! TODD

**trnhockey** · 17 October 2019, 01:29 AM

Acorn, how do I get it to work on mobile also? It works fine on desktop but then when I do the same on the mobile version it messes up the desktop version? https://museum.tv/faq.htm

**Acorn** · 17 October 2019, 09:33 AM

Originally Posted by trnhockey

Acorn, how do I get it to work on mobile also? It works fine on desktop but then when I do the same on the mobile version it messes up the desktop version? https://museum.tv/faq.htm

just use the Generator again for the narrower Placeholder in the Variant, keeping the same HTML Code (body) detail.

It is possible to change all the widths to 100% in the CSS Code (head) to make the FAQs match whatever the width of the Placeholder is but you have to be careful and check each change in turn; the padding becomes the problem.

Acorn