looking for show/hide example

NickMalloy · Oct 13, 2005

I am looking for a good example of showing and hiding content within a <div> using css?

Vragabond · Oct 13, 2005

The only way you can do it cross browser and purely in CSS is by using anchor tags and :hover or :active pseudo classes. However, that is not the best way to do it, because it will seem confusing to people. I suggest you employ a little bit of javascript that switches display from block to none and vice versa on the respective divs. Or use visibitility hidden and visible if you want to still show the space occupied by the hidden element to be reserved.

NickMalloy · Oct 13, 2005

Do you have an example or can you point me to one.

BabyJeffy · Oct 13, 2005

Something like this (which is the same as one of Vragabonds suggestions):

Code:

<style type="text/css">
#uniqueDiv1 {
  display:none; /* use display:block; to show by default */
}
</style>
...
<body>
<a href="javascript:document.getElementById('uniqueDiv1').style.display = (document.getElementById('uniqueDiv1').style.display == 'block') ? 'none' : 'block';">Show/Hide Div</a>
<div id="uniqueDiv1">uniqueDiv1 content</div>
</body>

Mixes a little javascript in the a href.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

kaht · Oct 13, 2005

Even tho divs are display style block inherently, you still have to explicitly define it for the javascript conditional to evaluate true the first time the button is clicked.

Code:

<script language="javascript">
function switchDisplay(obj) {
   obj.style.display = (obj.style.display == "block") ? "none" : "block"
}
</script>
<input type="button" value="show/hide" onclick="switchDisplay(document.getElementById('mydiv'))">
<div id="mydiv" style="border:1px solid #000000; display:block">This is the div you want to hide</div>

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

BabyJeffy · Oct 13, 2005

Too slow, kaht [smile]

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

kaht · Oct 13, 2005

as usual

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

NickMalloy · Oct 13, 2005

thanks everyone.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

looking for show/hide example

NickMalloy

Programmer

Vragabond

Programmer

NickMalloy

Programmer

BabyJeffy

Programmer

kaht

Programmer

BabyJeffy

Programmer

kaht

Programmer

NickMalloy

Programmer

Similar threads

Part and Inventory Search

Sponsor