Show/Hide Div with CSS

[Dysan]

Hi,

Is it possible to show/hide a div using CSS declarations? - If so, how?

<style>

</style>

[bradgrafelman]

Isn't this the same question you asked here?

Please stop making multiple threads for the same topic.

[PureDrive]

You would have to use both javascript and css. You will have to give your div an ID and make it invisible by doing this:

<div id="foo_id" style="display:none">Some content</div>

Now you will need a javascript function that changes the display:none style to display:block which will render your div visible. Here is a javascript function I use to toggle divs:

var element_id = "";
var state = 0;

function open_close ( id )
{
	if ( state == 0 )
	{
		state = 1;
		element_id = id;
		document.getElementById( id ).style.display = 'block';
	}
	else
	{
		if ( id == element_id )
		{
			state = 0;
			document.getElementById( id ).style.display = 'none';
		}
		else
		{

		state = 1;
		document.getElementById( element_id ).style.display = 'none';
		document.getElementById( id ).style.display = 'block';
		element_id = id;
	}
}
}

Just dump the about JS in a file called open_close.js.

Hope this helps.

[bradgrafelman]

You could also simplify the JS down to:

<script type="text/javascript">
function open_close(id) {
    var display = document.getElementById(id).style.display;
    display = (display == "block" ? "none" : "block");
}
</script>

Heck, you could even reduce the function down to 1 line, though I added the variable in there to reduce typing. :p