• snippets
  • all/
  • popular/
  • yours
• developer
• blog

• Big /
• Small

We Recommend

Posted By

luman on 06/28/06

Tagged

display css

Versions (?)

06/28/06 03:22pm

Who likes this?

134 people have marked this snippet as a favorite

tylerhall
bomberstudios
daniel
xaviaracil
Bunker
College
luxuryluke
Navegante
mhinze
meth
tomson
sergiomas
postNuKe
aurele
Fixe
ndegruchy
terriK
panatlantica
marc0047
fatihturan
trickychicken
kyokutyo
markfavazza
px
mbadran
bbuckley
pablodgavilan
oronm
ganu
ttscoff
yu_industries
clifton
powerkan
visualAesthetic
inakiabt
raws
rmaltete
maese
mdavie
Hirmine
Hollow
indianocean
peterF
Shpigford
lhplam
dmarten
ange
eunjoo1984
pcolton
demods
fugue
noname
Poltras
clapfouine
banjomamo
Starchaser
jacksont123
miyazima
nankoweap
vvarp
d4rk
Phoenix
d10018
happolati
n00ge
jotom
verucadea
spiralfunk
manub
tmarkiewicz
asimovi
vali29
heinz1959
benrasmusen
udayrayala
marteki
verbal
gasface
cypher
abhisek
Winkyboy
naz
jfherring
skywalker
vincent
gilbitron
eszpee
fsorbello
visuallyspun
SmpleJohn
jeangoodwyn
vasya1905
raptrex
Steffen82
DFCNT
cristianciofu
usgraphicscom
sosof
titox
jatkins
wbowers
rchk
cidibee
Baris
gbot
dyesin
arturo
gafsveno
paullorentzen
rovision
crs0328
zeusmedia
jonhenshaw
stasiaholdren
Xek
nijitaro
matpol
vince2doom
LeeRJohnson
jamesming
kenray
amxm
jsalo
eskey
crashdr
jakepaint
benphelps
satsujin
esquareda
oriolfb
cementboot
skipper13
blackabee
grassdog

Published in: JavaScript 

function showhide(e) {
    el = document.getElementById(e);
	el.style.display = el.style.display  == "block" ? "none" : "block";
}

Report this snippet 

Comments

Subscribe to comments

Posted By: deadmoon on October 24, 2006

Posted By: potdarko on March 28, 2007

deadmoon is right!

Posted By: relipse on May 23, 2007

I always end up doing something like this

Posted By: ctran on July 18, 2007

With prototype, you can do $(e).toggle()

Posted By: krisdb on February 13, 2008

This is good, but it only works with elements with id's. what if you want to hide a field in a form, eg. document.form.name that doesn't have an id? Its almost better to pass in the whole document.getElementById or document.form.name. just makes it more generic.

Posted By: jatkins on February 24, 2008

I've done a similar script before, but rather than modifying the CSS display attribute on the fly, I just add or remove a CSS class 'hidden'. In your CSS file, just have: .hidden { display: none; }

This way means that if originally the element had display: inline, it will return to that when you show it again. Your method is great, but it will force elements to return to a display: block state regardless of their original display.

Posted By: sven on March 13, 2008

I agree with ctran: Such things are better done with Prototype.

Posted By: rozario on April 2, 2008

note: you can use empty quotes to default to the original CSS style:

function showhide(element) {

  element.style.display = element.style.display == "none" ? "" : "none";

}

Posted By: SamoriGorse on July 6, 2008

You can also take advantage to the fact that empty string is evaluated to false :

function showhide(element) { element.style.display = (element.style.display) ? "" : "none"; }

Posted By: conspirator on September 28, 2008

Jatkins, If you have something hidden via CSS and you have jQuery .removeClass('hidden'); what happens when they have javascript disabled? That content is hidden forever. It's best to use $('#e').hide; then $('#e').toggle();. This way, if the user has javascript disabled, then the content is still shown, but if they do have it enabled then they get the AJAXy goodness.