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 (http://www.phpbuilder.com/board/showthread.php?t=10349233)?

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