FAQ drop down boxes

[Initiostar]

I believe the above example https://www.madaboutmolds.com/Everyt...ht%20here!.htm uses the Highslide JS Generator http://highslide.com/configurator.php ? (at least it looks that way from the code).

[Acorn]

I've worked it out. marjorie is using https://www.jotform.com/help/297-Sho...Collapse-Field and text/images for the FAQs; there being no actual form fields on the page.

For 10 FAQs as here, I would just have created pop-up Layers for each

My own design decision might have been to put all the FAQs in as ten separate pages and present them through an IFRAME (eleven as there is the fully collapsed FAQ Options used as a safe return point).
Only two of the FAQs need much space so the long main page could be much reduced and the two long ones just rely on an IFRAME vertical scrollbar.

Here is an example: Xara - IFRAMEd FAQs.xar.
It only handles the FAQ pages for A, B & C as I have left the rest as your homework.

To develop:

1. In the Page and Layer gallery, select the faqs page.
2. Duplicate it. // Creates faq-d page.
3. Move faq-d page to the bottom.
4. Select faq-d page.
5. Select all FAQs below Option D and move them to the bottom of the page.
6. Clone the white rectangle and red latter in any prior page and move to faq-d.
7. Change the Option D link to faqs.htm // Ensure Correct automatically is unticked.
8. Change the left arrow to an up arrow.
9. Save the file
10. Repeat for all other Options.

If more space is required, delete all but the above and below Option bars and change their text to Previous FAQs and Next FAQs and set their link to faqs.htm.

Clearly the contents of each Option are up for grabs as are the Option Questions. I have used marjorie's styling as a starter.

Acorn

[marjorie]

Yes, if you look at my link. This example is built with a free plan in Jotform. Unfortunately, it's limited to only 100 page loads per month, but it works well and is very easy to set up. For now, I have what I need in case another client would need it. I was just wondering if there was anything easy without coding that would not need a plan. I have other options I could use as well, such as expandable text code, expandable pins, and images. I would just rather not work with code if possible.https://www.madaboutmolds.com/Everyt...ht%20here!.htm

[Chris M]

Shamelessly stealing Acorn's hard work. I would attack it using layers rather that separate pages which keeps everything in the same place, gives the option of using the built in animations and eliminates the small amount of code.

Layered FAQs.web

[Acorn]

Shamelessly stealing Acorn's hard work. I would attack it using layers rather that separate pages which keeps everything in the same place, gives the option of using the built in animations and eliminates the small amount of code.
Layered FAQs.web

Nicely lifted Chris, I avoided Layers as you cannot (easily) collapse the expanded FAQ.

Acorn

[Chris M]

Nicely lifted Chris, I avoided Layers as you cannot (easily) collapse the expanded FAQ.

Acorn

The layers are left at the default 'Close Pop-up Automatically'. Click anywhere and the pop-up closes.
I would have been nice to have the the animation drop downwards on the index page, then push upwards on a layered page, but alas it was not meant to be.

[Acorn]

The layers are left at the default 'Close Pop-up Automatically'. Click anywhere and the pop-up closes.
I would have been nice to have the the animation drop downwards on the index page, then push upwards on a layered page, but alas it was not meant to be.

Chris, with the popup: open "...2 close "..." Tweak, you can add Fades: https://www.talkgraphics.com/showthr...anced-features in and out: Layer Name: layerX (fade-in 2) (fade-out 5) for a 2 second fade in and a 5 second fade out and the Link call would be popup: open "(fade-in 2)", "(fade-out 5)". I have found these undocumented features usually quite difficult to remember and maintain.

Acorn

[Acorn]

Yes, if you look at my link. This example is built with a free plan in Jotform. Unfortunately, it's limited to only 100 page loads per month, but it works well and is very easy to set up. For now, I have what I need in case another client would need it. I was just wondering if there was anything easy without coding that would not need a plan. I have other options I could use as well, such as expandable text code, expandable pins, and images. I would just rather not work with code if possible.https://www.madaboutmolds.com/Everyt...ht%20here!.htm

The only code is in the Placeholder,

<iframe src="faqs.htm" name=""faqList" width=100% height=100% scrolling=no style="border:none;">Your browser does not support IFRAMEs</iframe>

This is no different to Xara's Embed a website Widget but it works for the site it is hosted in as well. Xara - IFRAMEd FAQs.xar is not dependent on any third party support, hosting or charge. the FAQ pages can be a separate .XAR file publishing to the same folder or sub-site folder. Finally, it works right out the box with Variants.

Acorn