Accordion solution for the year 2022 :-)

Hello everyone,

I am looking for something that represents a "real" accordion. As it is usually used on FAQ pages (Bootstrap etc.) so not the often "abstract" included widgets that have the technical and optical (design-wise) status of mid-2000 (to say it provocatively ;-)

Xara would do well to update here the many ancient playful no longer contemporary components, because much unfortunately now looks like the day before yesterday. Otherwise they will sooner or later be overtaken by time. So much for my opinion :-)

So to come back to the topic: Are there any other solutions or do you have to tinker something yourself based on layers? Somehow many of the formerly existing pages with (free) Xara modules or extensions seem to have disappeared or I simply can't find them anymore.

Thanks, TomTom

I absolutely am missing something here. But I think what you are searching for can be found in the Content Catalog.

Do you mean the instrument accordion or some type of template or document that expands like an accordion?

TomTom, you will never get a "real accordion" in a Xara design as its whole premise is WYSIWYG. There will never be any dynamic change of the height of a page so you cannot have an unlimited tall FAQ - until now.

This approach uses one line of code: <iframe src='' name='accordion' width=100% height=100%></iframe>. This is added to a Placeholder. The rest is pure Xara.
The one thing you may not be aware of is the ability to type anything into the Open link in: box. here we will need 'accordion'.

Each FAQ or pop-up text is a complete Xara page, so you are not limited to the normal height issues that a Layer affords. It can have any Web Animation, Sticky state (and its own layers).

Attachment 132671

I have made simple Text Columns as the Links to the FAQs.
If they are outside the Placeholder they need to use Open link in: accordion.
On any of the FAQ pages, they can be one of (accordion, Not Specified, Same Frame (_self)).

1. No Layers.
2. One line of code.
3. Complete Xara design at your fingertips.

---

It would help if you can describe which ones are "the many ancient playful no longer contemporary components"?

The same goes for those you think have vanished.

Acorn

Quote:

---

Originally Posted by gwpriester

I absolutely am missing something here. But I think what you are searching for can be found in the Content Catalog.
Do you mean the instrument accordion or some type of template or document that expands like an accordion?

---

Gary, the only usable one is the Easy Accordion and you really have to hack into it to change it to your needs.

Acorn

Quote:

---

Gary, the only usable one is the Easy Accordion and you really have to hack into it to change it to your needs.

---

Thanks. I was picturing one more like this: Lawrence Welk

Quote:

---

Originally Posted by gwpriester

Thanks. I was picturing one more like this: Lawrence Welk

---

OK. As long as there are no music files!
Do you need an extra finger for each page?
And dancing teeth?

Acorn ;))

Here is a Vertical Accordion using the method: Attachment 132674.

Acorn

Ah, so not need for the bubble machine. You probably don't remember Lawrence Welk. Very popular here in the US from the 50's to the 80s. It was pure schmaltz.

Quote:

---

Originally Posted by Acorn

Here is a Vertical Accordion using the method: Attachment 132674.

Acorn

---

That's one glitzy and elaborate contraption you created, Acorn!

Quote:

---

Originally Posted by Boy

That's one glitzy and elaborate contraption you created, Acorn!

---

Thank you Boy.

I hate the fact that Xara renders every character in a vertical alignment with its own separate Link.
It is really just a set of Sticky link bars and blobs with Reveal animations.

With a Horizontal Accordion, you would have to given the open bar a link to a closed set of bars as the later ones may not be visible in a deep FAQ list.

It works across Variants but does not retain any knowledge of which bar is open.

Acorn

Well, we know that working with Xara apps is first of all about looks and ease of use. Efficiency follows at some distance.

Hello,

for first thanks to all for help! I did try to modify it somewhat to a horizontal version (see attached) but for some reason it does not show up my labels :-)

TomTom


Attachment 132675

Sorry TomTom, fixing other people's issues is an expensive craft.

Here is a working Horizontal Accordion: Attachment 132677.
It has a couple of differences in presentation that i leave to you to discover.

Acorn

Quote:

---

Originally Posted by Acorn

Sorry TomTom, fixing other people's issues is an expensive craft.

Here is a working Horizontal Accordion: Attachment 132677.
It has a couple of differences in presentation that i leave to you to discover.

Acorn

---

Hello, sorry, I did not ask for fixing. Only why it does not display the labels.

Quote:

---

Originally Posted by TomTom66

Hello, sorry, I did not ask for fixing. Only why it does not display the labels.

---

Discovering why something is not working is fixing. I don't know what you did and you didn't explain so to find out, I would have to unpick yours.

Acorn

@ Acorn - liked your updated version where the visitor sees all the panels closed (kind of a holding panel). Had a play >> https://initiostar.co.uk/demo/accordion/

Understood all the labels on a panel header (and the rectangle) are set to 'sticky' such that where an incoming panel/page is longer in length than the placeholder, then the panel headers stay in view and the visitor will see a vertical scrollbar.

I set the index page to 1200px and the panel pages to 800px (same width as the placeholder). I used an up-arrow as a link on a live header back to the holding page which has the effect of closing the accordion.

My only tweak to your iframe was to add a border. <iframe src="acc0.htm" name="accordion" width="100%" height="100%" style="border:1px solid #00bf02;"></iframe>

Really great idea and thanks for sharing.

For interest: Attachment 132680

@Initiostar,Gary your example is very amusing.

Thanks for sharing.

Acorn