Help on hiding html elements

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Help on hiding html elements

Post 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?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 ;)
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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.
Post Reply