# Accordion Effect

**URL:** <https://discourse.softpress.com/t/accordion-effect/26343>\
**Category:** Xway\
**Created:** [June 15, 2026, 10:29am UTC](https://discourse.softpress.com/t/accordion-effect/26343 "2026-06-15T10:29:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![UmbertoT](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/u/ea666f/32.png) [@UmbertoT](https://discourse.softpress.com/u/UmbertoT)\
**Post date:** [June 15, 2026, 10:29am UTC](https://discourse.softpress.com/t/accordion-effect/26343/1 "2026-06-15T10:29:00Z")

</div>

Good morning, Jeremy,  
I’d like to add some “accordion” elements to my website pages. The manual explains how to do it, but it’s not a very straightforward and simple procedure. Do you think Xway will provide a function, action, element, or something similar in the near future that can easily achieve this effect?  
Thank you.  
Umberto

Buongiorno Jeremy  
vorrei inserire nelle pagine del mio sito alcuni elementi “accordion”. Il manuale spiega come fare ma non è una procedura così immediata e semplice. Pensi che in un prossimo futuro sarà prevista in Xway una funzione, un’azione, un elemento o qualcosa di simile per poter, con facilità, ottenere questo effetto?  
Ti ringrazio  
Umberto

---

<div class="post-metadata">

**Author:** ![Jeremy](https://discourse.softpress.com/user_avatar/discourse.softpress.com/jeremy/32/2740_2.png) [@Jeremy](https://discourse.softpress.com/u/Jeremy)\
**Post date:** [June 15, 2026, 11:50am UTC](https://discourse.softpress.com/t/accordion-effect/26343/2 "2026-06-15T11:50:44Z")

</div>

Hi Umberto,

Are you looking for something like a `details` element?

There is some information [here](https://www.w3schools.com/TAGs/tag_details.asp), and we do intend to support this in a future version of Xway, but it’s not something we’re currently working on. For now, you’d need to add this via a markup item.

Alternatively, you can use target styles to create collapsible sections. This is mentioned in the User Guide (as you’ve seen), and isn’t so difficult to implement, although perhaps the guide  
could make it clearer that there are two different methods involved:

1. Target style changing None display to Normal
2. Target style changing Maximum Height from zero

The first method displays the hidden box instantaneously, while the second method allows for a transition.

Here is a sample document that shows both methods.

[Collapsible boxes.zip](https://discourse.softpress.com/uploads/short-url/u9TpE1hqhBPCx5NDFaxHAd3rEgZ.zip) (14.1 KB)

There are three pages. On the first page there are two collapsible boxes that are shown and hidden using a target style to change Display from None to Normal. On the second and third pages the collapsible boxes are shown and hidden using a target style to change Maximum Height from zero to 300px (or a larger value if needed). On these pages there is a 1-second transition during which the maximum height is increased, but the transition is added in slightly different places, so on the second max-height page the boxes expand gradually but collapse immediately, which might be less distracting - try it in Xway’s Web view and see which you prefer.

---

<div class="post-metadata">

**Author:** ![UmbertoT](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/u/ea666f/32.png) [@UmbertoT](https://discourse.softpress.com/u/UmbertoT)\
**Post date:** [June 15, 2026, 5:27pm UTC](https://discourse.softpress.com/t/accordion-effect/26343/3 "2026-06-15T17:27:13Z")

</div>

Grazie mille Jeremy per la tua risposta immediata. E grazie per i suggerimenti, che proverò ad implementare.

Umberto

Thank you very much Jeremy for your immediate response. And thanks for the suggestions, which I will try to implement.