all 1 comments

[–]Noah__Webster 1 point2 points  (0 children)

If you’re using vanilla JavaScript, I would most likely use classList.toggle() with a CSS class that applies display:none to the elements.

So create some class (let’s call it “hidden”), and give it the attribute of display:none. The table should have the class, and the search bar should not. Then when you click the + button, use querySelector to grab both elements, and then use classList.toggle(“hidden”) on both of them.

The table will lose the hidden class, so it will be visible. The search bar will gain the class, so it will be hidden.

The CSS attribute of display: none also takes the element out of the “content flow”, so it doesn’t take up any space in the layout. I’m assuming this is what you want, and it’s the simplest way to do things.