# Simple Container with switchable content (views)?

**URL:** <https://community.weweb.io/t/simple-container-with-switchable-content-views/5560>\
**Category:** How do I?\
**Created:** [November 26, 2023, 11:01am UTC](https://community.weweb.io/t/simple-container-with-switchable-content-views/5560 "2023-11-26T11:01:27Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![erbteilung](https://avatars.discourse-cdn.com/v4/letter/e/fbc32d/32.png) [@erbteilung](https://community.weweb.io/u/erbteilung)\
**Post date:** [November 26, 2023, 11:01am UTC](https://community.weweb.io/t/simple-container-with-switchable-content-views/5560/1 "2023-11-26T11:01:27Z")

</div>

Hi,  
I am amazed how fast and intuitive weweb is. Can’t believe how you managed to achieve this performance. Genius!  
I come from retool which has one very nice component. The Container has views where you can put different content and also add animations to switch the content. That thing is really missing or I haven’t found it.

- I saw the tabs container which is good, but i found no way to hide the tabs as I just want to control the views with workflows/scripts.
- I am aware of building it with variables and show/hide of components but it would not be intuitive or fast

So is there an easy way to switch the content of a container?

Best,

Chris

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [November 26, 2023, 11:28am UTC](https://community.weweb.io/t/simple-container-with-switchable-content-views/5560/2 "2023-11-26T11:28:48Z")

</div>

Make an array of objects with your data (slides/views) then just access it by indexes. Like for example the first slide would be [0], the other would be [1] and so on. You can bind the number to a variable, and add buttons to control this.

---

<div class="post-metadata">

**Author:** ![erbteilung](https://avatars.discourse-cdn.com/v4/letter/e/fbc32d/32.png) [@erbteilung](https://community.weweb.io/u/erbteilung)\
**Post date:** [November 26, 2023, 11:36am UTC](https://community.weweb.io/t/simple-container-with-switchable-content-views/5560/3 "2023-11-26T11:36:34Z")

</div>

Thank you! But I want to design and style each view differently and with different components. Your idea just manages the data but not the visual representation or not?

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [November 26, 2023, 12:41pm UTC](https://community.weweb.io/t/simple-container-with-switchable-content-views/5560/5 "2023-11-26T12:41:15Z")

</div>

You can display whatever you want depending on the index you’re on. For example if you have 7 templates, then you show each of them at a specific index with conditional rendering/some other way. I did this with the method I’m describing. It’s a slider, with dynamic data displayed on different screens.

> <https://twitter.com/bro_broberto/status/1724923806240670196?s=20>

---

<div class="post-metadata">

**Author:** ![erbteilung](https://avatars.discourse-cdn.com/v4/letter/e/fbc32d/32.png) [@erbteilung](https://community.weweb.io/u/erbteilung)\
**Post date:** [November 26, 2023, 12:54pm UTC](https://community.weweb.io/t/simple-container-with-switchable-content-views/5560/6 "2023-11-26T12:54:53Z")

</div>

wow thank you!

---

<div class="post-metadata">

**Author:** ![erbteilung](https://avatars.discourse-cdn.com/v4/letter/e/fbc32d/32.png) [@erbteilung](https://community.weweb.io/u/erbteilung)\
**Post date:** [November 26, 2023, 12:58pm UTC](https://community.weweb.io/t/simple-container-with-switchable-content-views/5560/7 "2023-11-26T12:58:13Z")

</div>

Can you control via Script which slide is active? How did you do that? Found no action inside the slides component…

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [November 26, 2023, 1:08pm UTC](https://community.weweb.io/t/simple-container-with-switchable-content-views/5560/8 "2023-11-26T13:08:08Z")

</div>

I built this myself actually, it’s a div where the slides change based on the current index, I’m not sure how to do this in Tabs. It would be very long to explain, but I’m gonna post this kind of stuff on the Marketplace once it’s ready though) It’s doable with States and NoCode actions in the workflows tho, so possible in WeWeb.

---

<div class="post-metadata">

**Author:** ![erbteilung](https://avatars.discourse-cdn.com/v4/letter/e/fbc32d/32.png) [@erbteilung](https://community.weweb.io/u/erbteilung)\
**Post date:** [November 26, 2023, 1:42pm UTC](https://community.weweb.io/t/simple-container-with-switchable-content-views/5560/9 "2023-11-26T13:42:22Z")

</div>

Oh yes please. This looks very well done… and unique in weweb

---

<div class="post-metadata">

**Author:** ![erbteilung](https://avatars.discourse-cdn.com/v4/letter/e/fbc32d/32.png) [@erbteilung](https://community.weweb.io/u/erbteilung)\
**Post date:** [November 26, 2023, 4:52pm UTC](https://community.weweb.io/t/simple-container-with-switchable-content-views/5560/10 "2023-11-26T16:52:20Z")

</div>

You used also the transform as it seems… do you also hide/unrender the not visible screens after the motion to improve performance or is this not even necessary ?

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [November 26, 2023, 4:58pm UTC](https://community.weweb.io/t/simple-container-with-switchable-content-views/5560/11 "2023-11-26T16:58:48Z")

</div>

Not really, there weren’t that many of the slides.
