CSS Visibility – About and How to use it

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:		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!