Page 1 of 1
Help on hiding html elements
Posted: Sun Jun 26, 2005 4:48 pm
by raghavan20
I was wondering how to hide a div ?
If I have something like:
<table><tr><td>Beautiful places on Earth</td><td><div id = 'taj'>Taj Mahal is a beautiful place in India</div></td></tr></table>
I want to show 'Taj Mahal is a beautiful place in India' only if someone clicks on 'Beautiful places on Earth', how wld I do that?
Posted: Sun Jun 26, 2005 4:51 pm
by Chris Corbyn
Using CSS and Javascript it's easily done.
You'll want the
onclick event handler, the
display property (block, none), and document.getElementById('divIDHere')...
If you don't figure it out, just ask

Posted: Sun Jun 26, 2005 5:18 pm
by raghavan20
<script language = 'javascript'>
function hideDiv(divName){
document.getElementById(divName).style.visibility = 'hidden';
}
</script>
<table><tr><td>General information places on Earth</td><td><div id = 'bangalore'>Bangalore is where most of the IT activities take place in India</div></td></tr></table>
<table><td><div id = 'taj' onclick = 'javascript:hideDiv("taj"); return false'>Taj Mahal is a beautiful place in India</div></td></tr></table>
<table><tr><td>Beautiful places on Earth</td><td><div id = 'kashmir'>Kashmir is another beautiful place in India</div></td></tr></table>
Now, if I click on 'Taj Mahal is a beautiful place in India', it hides itself but the next text, I mean the table doesnot go up which leaves the space empty which I donot want.
I wanted an effect where one div is hiden, then the next following element should come up in that place.
I want to use this in my bloggin site, where I will use to show some of the details of the post if they click show details and hide them when they click to hide. So when I list all posts, then can opt to view details or not, if they dont want to see details then I want the next post to follow immediately after the current post.
Posted: Sun Jun 26, 2005 5:25 pm
by Chris Corbyn
Hint: Don't use tables.
That alone wont solve the issue anyway. You need display:none and display:block rather than visibility which does just as it says, toggles if it's visible or not
If you do want to go down the tables road then I belive there's a 'collapse' option for visibility (or is that display?

) but if I remember correctly it's IE only.
Posted: Sun Jun 26, 2005 6:09 pm
by Burrito
you can actually get away with tables and in fact use its elements for what is shown/hidden.
ex:
Code: Select all
<script>
function hideIt(where){
document.getElementById(where).style.display = "e;none"e;;
}
</script>
<table width="e;400"e;>
<tr>
<td>
<a href="e;javascript:hideIt('bob')"e;>Hide Good ole' bob</a>
</td>
</tr>
<tr id="e;bob"e;>
<td>
Hi my name is bob, I like candycanes with my hamburgers
</td>
</tr>
</table>
As D11 said, you need to use the display property vs the visibility property as this won't "corrupt" your page formatting as it hides/shows your elements.