onclick set a div from hidden to show

hi i have created a div with the style='visibility:hidden'

<div id='ge' style='visibility:hidden'>"

can anyone give me an example of setting the div style to show using onclick please?

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

You should change the style in a CSS form, it will be much easier to manipulate.

Some source I'm using:

#hiddenback {

You should basically nest the style then "toggle" visibility using "document.getElementByID". I found a great article:


Lots of ways to do this.

ac_davis2002Author Commented:
mmm cant get the link to work

I was hoping for a simple way of doing it really, I have created a button and wanted the onclick event to set the visibility to show? do I need to use javascript?

<input type='button' onclick='var d= document.getElementById("ge"); d.style.visibility="visible" ' />

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
OWASP Proactive Controls

Learn the most important control and control categories that every architect and developer should include in their projects.

perhaps this is what you seek:
<input type='button' value='toggle view' onclick='var d=document.getElementById("ge"); d.style.display = d.style.display=="none" ? "block" :"none";'/>
<div id='ge' style='display:none;'>z</div>

Open in new window

side note: you can use a link as well a href="#"

Ok - heres something simple.  I created this for a site login page. When you click the textbox it sends the onFocus information "toggleMsg('msg-2')" to the java function, when onBlur it sends the same information to java.  It can be adapted to what you are trying to do.


function toggleMsg(idElement){
  element = document.getElementById(idElement);
  } else {

Text box onFocus/onBlur that changes the DIV:

<input name="textfield2" id="psw" onFocus="javascript:toggleMsg('msg-2')" onBlur="javascript:toggleMsg('msg-2')" type="password" maxlength="50"/>

DIV Iteself (thing we want to change):
<span class="style4 style10" id="msg-2" style="visibility:hidden;">Account locks after 3 failed attempts.</span>

There is a limit to how meny Style Calls can executed in Mozilla and IE. it is better to keep all CSS in the style sheet.
I prefer the simple DOM method onClick="[ElementName].className='show andMove andbolder'.
className is case sensitive and the styles are applied left to right in the list seperated by spaces.
ac_davis2002Author Commented:
Thanks guys
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.