Accordion solution for the year 2022 :-)

[Boy]

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

[TomTom66]

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


IFRAME - Horizontal Accordion.xar

[Acorn]

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

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

Acorn

[TomTom66]

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

Here is a working Horizontal Accordion: IFRAME - Horizontal Accordion.xar.
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.

[Acorn]

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

[Initiostar]

@ 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: IFRAME - Accordion.xar

[Acorn]

@Initiostar,Gary your example is very amusing.

Thanks for sharing.

Acorn