Show/Hide a component on button click

Hi I'm very new to retool and I wanted to know how to show/hide a component or any component on button click? I saw a ojbectname.hidden and I don't know how to manipulate the value to true/false of this in script area on the bottom resource run js codes cript

If you really need a button you'll need to record state somewhere as you can't control visibility with event handlers. So, if you really, really need a button I would have the button toggle a variable in localStorage.

Ideally I would use a switch to do that, would that work for you?

1 Like

Hey yobz, happy to help you out with this :smiley: and this is also covered in the layout section of our docs if you need further clarification. You can dynamically program the hidden property of a component by clicking on the component, opening the inspector panel (on the right), and scrolling down to the layout section.

The 'hidden' input field accepts any input that evaluates to a boolean and the component will be hidden based on the value of that boolean. Depending on your use case, you could program a component to be hidden based on the state of your app, the state of another components, on a variable in localStorage (as minijohn suggests), on a temporary state variable, or after some action occurs in your app.

If you just want a button that you can click to toggle the component visible/hidden, minijohns suggestion is a good one and here is what that could look like:

Alternatively you could use a temporary state variable. Here is what that would look like:

Either way you could have a button that triggers a JS query which toggles the state in the localStorage or in the temporary state variable.

Do you think this could work for your use case here?

2 Likes

@minijohn, @everett_smith wow guys impressive ideas on how this thing works thank you!

Btw I'm trying to understand things with modules since it does a lot of help building a page quicker.

Last question, i have a main page and I inserted two modules, the 1st module for a trigger containing multiple links or buttons components, and the 2nd module contains multiple components (container, tables, tabs, texts etc). Is it possible to show/hide the 2nd module if my trigger came from 1st module using state or localstorage techniques?

Glad it helped :metal: I don't understand the last question tho :sweat_smile: Could you elaborate on that?

Hehehe sorry for that, basically I was trying to achieve is to create a sidebar with contents using modules. Typical sidebar with buttons/links on left (a module that contains a container and bunch of buttons or links), and on the right side a content (a module contains a lot of components).

Yet again I was wondering if states or localstorage functionalities that will do show/hide in sidebar module can do its thing on a separate module.

something like this

No worries, got ya :v:

So architecturally speaking I would examine how much information and logic you'll be having across your tabs (Dashboard, TV Shows, etc.).

If you're building out multiple components for each tab that you see getting evolving even more (thus getting more complex) I would separate it into multiple apps that all share the same sidebar. Read more here about that.

If the complexity of each tab is manageable, then you can:

  • Use a listbox component for the sidebar
  • Create an output for the sidebar module with the value of the selected item
  • Use that value to hide/show your other modules
1 Like

Hey yobz,

To learn more about modules, I would recommend you check out the page in our docs on modules. This should get you a pretty solid understanding of how to use modules and what is possible with them :smiley:

In response to you second question, it looks like you are trying to create something very similar to a tabbed container. Tabbed containers allow you to create a container with multiple tabs that each hold their own set of components. You can easily toggle between the tabs similar to the effect of your sidebar. Do you think that using a tabbed container could help you more easily achieve your vision here?

As @minijohn wisely pointed out, you can also create multi-page apps. If your tabbed container starts becoming unwieldily due to its size, it would be a good idea to break it out into multiple apps!