Show / Hide Search Component

I like the new search component added recently to tadabase. However, I wanted to be able to hide the “div” containing the search component when loading the page and add a button to show/hide the search component.

Hidden Search Component

Shown Search Component

To do that, I added a custom HTML component


And added the following Javascript to the page containing the search component

 var coll = document.getElementById("cbutton");
 coll.addEventListener("click",  function()

     var parent = document.getElementById("x_element_page_18_58")

And added the following CSS class to the search component to have the component hidden by default


@tim.young - It would be cool to use this like tabs and make the buttons look the ones you created on your family biz dashboard.

So let’s say I have 4 components on a page and each button would then hide the other three.
How might I go about that?

1 Like

@mdykstra that sounds like a good idea! Did you find out how to make it work?

@hussein how did you add the blue search button? Would that work for a Form Component instead of Search Component?