[CSS] Hide a div

[CatsHighfiveMe]

Heya guys.

I'm trying to make a <div> that shows up when you click on another <div>.

Using css I'm telling the second <div> to have no heihth and to be hidden.

On the first <div> I have an onclick event that setts the visiblity of the 2nd <div> to show and the heigth to 100%

Here's the source code.

<div onclick="javascript:document.getElementById('make_comment').style.visibility = 'visible'; document.getElementById('make_comment').style.height = '100%';">Click here</div>
	<div id="make_comment" style="visibility:hidden; height:0px;">

	<table align="center">
	<tr>
	<td>bla bla bla</td>
	</tr>
	</table>

	</div>

It works the way I want in Firefox.

But in IE, the height of the 2nd <div> is always 100% it doesn't make it smaller!

How can I get it to work in both browsers?

Thank you!!!

k0zy

[gigapixels Veteran]

Also use the display attribute...

So when it's hidden, set it to display:none;

And when it's visible, set it to display:block;

I think that will work for you.

[CatsHighfiveMe]

Works :)

Thank you!

k0zy

[elliot]

I tried it myself and visibility worked fine. :huh: As long as you stop SP2 from blocking it...

[+mrbester MVC]

onclick already is a script event so you don't need the javascript: protocol...