# The best way to create Accordion Style in Thunkable

**URL:** <https://community.thunkable.com/t/the-best-way-to-create-accordion-style-in-thunkable/2710965>\
**Category:** Questions about Thunkable X\
**Created:** [November 20, 2023, 8:28am UTC](https://community.thunkable.com/t/the-best-way-to-create-accordion-style-in-thunkable/2710965 "2023-11-20T08:28:21Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![minamaestro2023kg](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@minamaestro2023kg](https://community.thunkable.com/u/minamaestro2023kg)\
**Post date:** [November 20, 2023, 8:28am UTC](https://community.thunkable.com/t/the-best-way-to-create-accordion-style-in-thunkable/2710965/1 "2023-11-20T08:28:21Z")

</div>

What is the best way to create the Accordion Style in Thunkable

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 22, 2023, 7:46pm UTC](https://community.thunkable.com/t/the-best-way-to-create-accordion-style-in-thunkable/2710965/2 "2023-11-22T19:46:07Z")

</div>

Hello @minamaestro2023kg 👋  
Please be sure to read our [Community Guidelines](https://community.thunkable.com/t/community-guidelines/78) and [How to ask Great Questions v2.0 - Learn About the Thunkable Community - Community](https://community.thunkable.com/t/how-to-ask-great-questions-v2-0/2689983)

Could you please share more information regarding what you need to build?

---

<div class="post-metadata">

**Author:** ![minamaestro2023kg](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@minamaestro2023kg](https://community.thunkable.com/u/minamaestro2023kg)\
**Post date:** [November 26, 2023, 3:09pm UTC](https://community.thunkable.com/t/the-best-way-to-create-accordion-style-in-thunkable/2710965/3 "2023-11-26T15:09:14Z")

</div>

I’d like to build a to do list with the accordion style as a style.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [November 26, 2023, 8:59pm UTC](https://community.thunkable.com/t/the-best-way-to-create-accordion-style-in-thunkable/2710965/4 "2023-11-26T20:59:26Z")

</div>

You’ve said that twice but it would be helpful to provide a screenshot or sketch of what you mean or link to an example.

---

<div class="post-metadata">

**Author:** ![minamaestro2023kg](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@minamaestro2023kg](https://community.thunkable.com/u/minamaestro2023kg)\
**Post date:** [November 27, 2023, 5:53pm UTC](https://community.thunkable.com/t/the-best-way-to-create-accordion-style-in-thunkable/2710965/5 "2023-11-27T17:53:32Z")

</div>

Sure,  
here an approximate example,

[![](https://img.youtube.com/vi/Msp3l7xzhOk/maxresdefault.jpg "How to Create an Accordion Menu in Thunkable") ](https://www.youtube.com/watch?v=Msp3l7xzhOk)

but the used blocks are legacy blocks, it would be better to have the same effect using the current blocks and with better styling

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 29, 2023, 9:02pm UTC](https://community.thunkable.com/t/the-best-way-to-create-accordion-style-in-thunkable/2710965/6 "2023-11-29T21:02:26Z")

</div>

Hello @minamaestro2023kg 👋  
Thank you for sharing more information.  
The design has definitely changed but the button components and the blocks on the video are still the same. For the boxes, you can use containers. You can find more info here: [Layout Component - Thunkable Docs](https://docs.thunkable.com/app-design/ui-components/basic-components/layout#insert-additional-containers)

---

<div class="post-metadata">

**Author:** ![minamaestro2023kg](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@minamaestro2023kg](https://community.thunkable.com/u/minamaestro2023kg)\
**Post date:** [December 2, 2023, 6:16am UTC](https://community.thunkable.com/t/the-best-way-to-create-accordion-style-in-thunkable/2710965/7 "2023-12-02T06:16:26Z")

</div>

@ioannis Thank You

---

<div class="post-metadata">

**Author:** ![minamaestro2023kg](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@minamaestro2023kg](https://community.thunkable.com/u/minamaestro2023kg)\
**Post date:** [December 2, 2023, 6:41am UTC](https://community.thunkable.com/t/the-best-way-to-create-accordion-style-in-thunkable/2710965/8 "2023-12-02T06:41:53Z")

</div>

The Point Now, How to add container dynamically?

---

<div class="post-metadata">

**Author:** ![minamaestro2023kg](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@minamaestro2023kg](https://community.thunkable.com/u/minamaestro2023kg)\
**Post date:** [December 2, 2023, 5:28pm UTC](https://community.thunkable.com/t/the-best-way-to-create-accordion-style-in-thunkable/2710965/9 "2023-12-02T17:28:25Z")

</div>

I’ve found a post about a similar project here,  
[Computed width and height for screen - Questions about Thunkable - Community](https://community.thunkable.com/t/computed-width-and-height-for-screen/623429)  
But I wasn’t able to get more details about how he was able to do it.

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [December 6, 2023, 11:11pm UTC](https://community.thunkable.com/t/the-best-way-to-create-accordion-style-in-thunkable/2710965/10 "2023-12-06T23:11:17Z")

</div>

Hello @minamaestro2023kg  
Why do you need to add the containers dynamically?  
The video adds all the containers in the beginning and then changes their visibility.  
You can do the same using the following block:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/6/46e4498b50897d6f574906c69a9126a310693ea5.png)

---

<div class="post-metadata">

**Author:** ![minamaestro2023kg](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@minamaestro2023kg](https://community.thunkable.com/u/minamaestro2023kg)\
**Post date:** [December 17, 2023, 5:48pm UTC](https://community.thunkable.com/t/the-best-way-to-create-accordion-style-in-thunkable/2710965/11 "2023-12-17T17:48:40Z")

</div>

Here is another example of a dynamic Accordion Style  
[Fun share: Add a FAQ to your app! - Tutorials and DIY Guides / Staff Made Tutorials - Community (thunkable.com)](https://community.thunkable.com/t/fun-share-add-a-faq-to-your-app/1733959/5)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [March 16, 2024, 5:49pm UTC](https://community.thunkable.com/t/the-best-way-to-create-accordion-style-in-thunkable/2710965/12 "2024-03-16T17:49:26Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
