Understanding Visibility Property in CSS

Hello guys. Welcome to our series, CSS. In our last segment, we saw the CSS calc property. With the help of calc property, we can perform calculations and can bring values and we can assign that to any property. I hope in the last segment, whichever practical we had performed, you have practiced it on your own. Our today's segment is on CSS visibility. CSS Visibility property helps us to show or hide our content. So, basically what is CSS visibility? Like it is mentioned here. The CSS visibility property is used to specify whether an element is visible or not. Means whichever are the elements of html, we use those elements to be visible or not. For these two things we use CSS visibility property. In visibility it so happens whenever we use visibility property, whether the content is shown or it is not shown but its space is occupied there. For example, when we have seen the display properties in the display segment. If we give display none to any element. So, that element we are not able to see plus even the space that it should have been occupied, it doesn’t occupy. But in visibility this doesn't happen. In visibility we are only not able to see the element but that is already placed in that space, whatever is the space of that element that is already occupied. So, if we see this thing with an example, we will understand it clearly. The thing that we have to keep in mind in visibility is whether the element is visible or not, we can do it with this property. And the other is even if the element is there or not space gets occupied. Here it's Syntax is there, visibility. In it there are only two properties, visibility visible or visibility hidden. There are no other properties beyond these two. For this we will perform one example, like it is shown in the slide visible and similarly the 2nd h1 we have taken is hidden, where the visibility is hidden. If we perform this practically it will be clearer. So, we will open our Sublime Text and we will set it on html, example visibility with CSS. We will save the program, (Pause) visibility css.html. Here with the help of CSS we will show up the heading, we will keep it displayed and we will even hide it. So, for that we will first take a heading h1. In h1 we will add (repeat) "This heading tag is with visibility Visible property value". Okay, save. Now we will open this program. Visibility CSS, okay so this is our program. You can see that this heading tag is with Visibility Visible property value. So, this is showing up now to us. We will copy the same heading and write it again, "visibility hidden property value". So, we are getting two headings here. One is in which we have kept visibility visible and in the other one we have kept the visibility hidden. Now in this h1 we will style, style visible, here we will add style visibility hidden, save and as soon as I reload it my second part which was there the visibility hidden one that has been removed means my heading tag which was there, its space is occupied here but it is not showing up as we have made the visibility hidden. So, whose visibility is still visible to us, it will be seen to us but whose visibility we have made hidden that we will not be able to see. So, this was our visibility portion in which we can make any element visible or hidden. So, this we had seen with the help of CSS. Now what we will do is we will generate one more program. We will write the program again. We will save it, visibility_javascript.html. Example visibility javascript, save. In this what we will do is first of all we will generate one div, div in that we will write, "This is a division that will hide and show." Save. We will open it. Okay. So, here there is a div where we have written hide and show. Now we will give this div a little bit of property, style, div, width, width we will give for example 200 pixels, border we will give as 1px, solid and we will also give a background color, Light green, save. So, this is our division and we will also give it a little bit of padding. For example, 20px. Okay. So, this is our division and now we will center align the body. Okay. This is our text in center, now we will make this div margin zero auto so that it comes in between. So, this is our division that has come. Now we will generate one button. Button, hide and show. So, this is our button named hide and show. Okay. So, this is our button and this is our division. Now we will do one thing, on this button we will hide and show this division. For that, what we will do is, first of all on this button we will mention the click event and on click we will show a function hide show. Now this function will go inside our javascript. We have not used so much javascript but for this example only how we can hide and show, we will only use the javascript code here...for that we will make a function in javascript. Function, if we have taken hide and show here, then hide and show.  We will not pass the argument and here we will mention the body. Inside this we have to capture the div. Currently we have not given any ID to the division. But let's say if I give it an ID, ID my division. Okay. Now we will fetch this ID inside our JavaScript so that it will come document.get element by ID and our IDs name is "My div". Now, what we will do is we will make this my div visible and hide. So, .style, what is our style, visibility. So, it is like visibility. So, style visibility equal to, after equal to, we can either hide it or we can show it. Our default div is already being shown, it is not hidden. So, in this "my hide". We will put one if condition, if visibility, the same thing, equal to, equal to, if it is visible. So, it is visible. If our style is already visible, so this "my div" is there, we will hide it. Visibility hidden. Or even if our div is hidden, it means the opposite of visible, meaning false condition. Means if it is hidden, then we will make it visible. Okay, so what is happening here, on the button click we are showing or hiding our division. So, if it's already visible, we will hide it or if it is not already visible, if it is already hidden, we will make it visible. Save, we will reload it. So, Hide and Show. As soon as I click the button it gets hidden and when I again click the button it shows, so here we are playing with the visibility, if our element is shown, then hide it if it is already hidden, then show it.  Now here if I write a note under this division. In the p tag, the above div will hide and show on click of the button, okay. So now I will click it, it will get hidden. So now you can see that my division is hidden but this content is not coming above while it is hidden. It stays in its place. This indicates that when my division is shown and how much ever space, height and width it has occupied, that much space when it is hidden, even then it occupies. What does this indicate? It indicates that our visibility property keeps its own space as it is no matter if it is hidden or visible. In both the visible and hidden, the element occupies its height and width. If we make it display none, in case of display none our space will also not be occupied and our content also goes up. So, this was our display visibility and height. How we can make things visible and hide. We have seen problems with normal CSS as well. In which we had seen one heading which was shown and the other heading which was hidden. We saw it through Javascript and how it is more useful for us. Here on the button click you can see that this is hiding and showing. So, this was our example for today's example. The first example was with the help of CSS. And the second example was with the help of Javascript.  This was visibility, how our content is shown and hidden. So, guys, in today's segment if you have any questions or queries, tell us on forums.learnvern.com. If you have any doubts or queries, tell us about that. But I requested whatever practical we have done of visibility, both with Javascripts and CSS. Practice it and try it on your own and try to make it stronger. Our next topic is on CSS sprint properties. Thank you.