CSS Visibility – About and How to use it

CSS Visibility – About and How to use it

2 35420

CSS Visibility – About and How to use it

Today we will talk about CSS again. And this is will property called ‘visibility’. This property already in CSS since second version (CSS2). All popular browsers like Firefox, IE, Safari, Opera etc already supporting this property.

Property Visibility defines – whether the element will be visible or not. Of course – these elements will take space at page. But you always can use ‘display’ property to hide these invisible elements. Visibility property can have four values.

this is:

  • collapse – element will hidden. It is usually applied to hide of columns or rows in tables. Note, this value not supported with IE8 and below.
  • hidden – element will hidden.
  • inherit – element will take value from its parent. Note, this value not supported with IE8 and below.
  • visible – element will visible (this is default value of this property).

Here are sample of using visibility property

Objects: sample image - checking visibility A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.
Actions:

And here are all html, css and js code of our sample:

<table cellspacing="0" cellpadding="0" border="1" class="sample1">
    <tr id="tr1">
        <td>Objects:</td>
        <td id="td1"><img src="visibility.png" alt="sample image - checking visibility" /></td>
        <td id="td2">A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</td>
    </tr>
    <tr>
        <td>Actions:</td>
        <td>
            <div><input type="button" value="Hide table cell 1" onclick="applyVisibility('td1', 'hidden');"></div>
            <div><input type="button" value="Hide table cell 2" onclick="applyVisibility('td2', 'hidden');"></div>
            <div><input type="button" value="Show table cell 1" onclick="applyVisibility('td1', 'visible');"></div>
            <div><input type="button" value="Show table cell 2" onclick="applyVisibility('td2', 'visible');"></div>
        </td>
        <td>
            <div><input type="button" value="Collapse row 1" onclick="applyVisibility('tr1', 'collapse');"></div>
            <div><input type="button" value="Hide row 1" onclick="applyVisibility('tr1', 'hidden');"></div>
            <div><input type="button" value="Show row 1" onclick="applyVisibility('tr1', 'visible');"></div>
        </td>
    </tr>
</table>
table.sample1 {width:100%;}
table.sample1 th, table.sample1 td{padding:5px;}
function applyVisibility(obj_name, new_value) {
    document.getElementById(obj_name).style.visibility=new_value;
}

Conclusion

I hope that our new lesson was useful for you. Good luck!

SIMILAR ARTICLES


2 COMMENTS

  1. So, I browse to this page expecting something else, but I decide to play with the example that you’ve posted anyway. Sadly, there is something fishy going on that could probably become the beginning of the in depth post I was originally hoping to find. To see the “fun” just run the example in this order (I’m in FF). — .

    –Click “Hide table cell 1”
    –Click “Hide table cell 2”
    –Click “Show table cell 1”
    –Click “Show table cell 2”
    –Click “Hide row 1”.

    What happened is now you have explicitly defined that Table Cells 1 and 2 be set to “Visible”, and you try to set the entire row (including table cells 1 and 2) to hidden. Well, looks like old Firefox says “Nope… not the whole row. These two little cell guys are set to be visible. I’m not gonna hide them.”

    Oh well, I thought it was interesting to note. I’m going back to jQuery world where I can toggle things. :)

    • Yes, this is interesting :)
      and commonly not depends on order.
      so, when row(TR) is hidden, but it elements(TD) is visible – we still able to see these elements

Leave a Reply