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 = &quote;none&quote;;
}
</script>

<table width=&quote;400&quote;>
  <tr>
  <td>
  <a href=&quote;javascript:hideIt('bob')&quote;>Hide Good ole' bob</a>
  </td>
  </tr>
  <tr id=&quote;bob&quote;>
  <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.