Javascript Hack – How to Hide/Show Div Elements!

I’ve been doing a lot of PHP/Javascript/AJAX programming for a new Twitter site and I have to say, there’s a REALLY easy way to hide and show your entire div elements without doing much with Javascript but using the document.getElementById(‘whateveridhere’).removeAttribute(‘id’);.

Whatever you want to hide, (for example a questionnaire that you want to show on the top of the webpage if user clicks a button), you can easily do so by putting ALL your code under a <div> element with “display:none” tag.

So, here’s an example code:

<div id=”whateveridhere” style=”display:none”>

your code goes here… whatever code it is, it will be “hidden” from user


<a href=”#” onclick=”removediv()”>Enter Questionnaire</a>

Now for some javascript code under your javascript file:

function removeid() {



That’s it!  Now when your users click on “Enter Questionnaire”, all of your questionnaire HTML code suddenly shows up.

I like this method because you don’t have to worry about using Javascript to pass PHP values.  Your PHP code can stay inside the hidden DIV and when your users want to see it, they click a button.

How simple is that?

This could be helpful if you are a web programmer/designer, save you a TON of time.  Of course, don’t forget to tweet, retweet, and tweet this blog post if you find it helpful! 🙂

Leave a Reply

Your email address will not be published.

Other interesting stuff at , , , ,
Check out more interesting categories: DIY, Featured, Featured Hacks, Featured Web, Hack, HOWTO, Projects, Web, WebApp.

Related News and Resources