Show / Hide Search Component

Showcase Tips and Tricks
1

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

image
image3756×926 190 KB

Shown Search Component

image
image1478×1028 69.2 KB

To do that, I added a custom HTML component

Search

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")
     parent.classList.toggle("ng-hide");    
}
);

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

image
image1144×636 27.9 KB

4 Likes
2

@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
3

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

4

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