Hi,

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

<style>

</style>

    Isn't this the same question you asked here?

    Please stop making multiple threads for the same topic.

      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.

        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

          Write a Reply...