How to make CSS component invisible?[SOLVED]

Question

I have a side bar that contain a form. I want to make this sidebar invisible when pressing a button. When I do so the form inside the sidebar is still visible.

How can I make the sidebar and all of the data inside it invisible at the same time?

All help will be greatly appreciated.

Thank you in advance.

Answer 1

there are many ways
No 1:
display:none;

No 2:
visibility:hidden;

No 3:
opacity:0;

PS: if you use No 1 way, the element will not take any space but with other ways, the space taken by the element will be remain same

Answer 2

Without your code nobody could give you accurate answer, because there isn't a single way to do: it depends on how you did implement your side bar with your form ^^ (there's even some cases hardest to handle, and probably at least minimal changes to do to your actual structure and/or css ti be able achieve your goal ;P)

Answer 3

Use display:block; instead

Answer 4

If the question is solved you should add [SOLVED] to the question title ;)

If not, we needs the complete code, not a description of how you managed it ^^

Answer 5

if i understand yuor problem. the solution is to add this to your side bar:

overflow: hidden;

maybe this will help too:
https://www.w3schools.com/howto/howto_js_collapse_sidebar.asp

Answer 6

MikeS can we see your code as we may be not totally grasping what you are asking. I believe yochanan sheinberger is actually giving you the correct answer.

Answer 7

Maybe visibility:hidden?

Answer 8

Farhan🇮🇳☪️ that's exactly what I am after however, how would I re-display it. Display:all; doesn't seem to work

Answer 9

I managed to fix it by doing display: none and then display:inline to re-show it when wanted

Answer 10

Yup we want code otherwise I really wrote how to use display:none and display:block but looks it's more complicated than what I think

Answer 11

Display :none;

Answer 12

Javascript:

var f = document.getElementById("myForm");

f.addEventListener("onsubmit", function() {
f.style.display = "none";
});