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?
Help on hiding html elements
Moderator: General Moderators
- raghavan20
- DevNet Resident
- Posts: 1451
- Joined: Sat Jun 11, 2005 6:57 am
- Location: London, UK
- Contact:
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
- raghavan20
- DevNet Resident
- Posts: 1451
- Joined: Sat Jun 11, 2005 6:57 am
- Location: London, UK
- Contact:
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.<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>
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.
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
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.
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?
you can actually get away with tables and in fact use its elements for what is shown/hidden.
ex:
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.
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>