CSS/JavaScript Vanishing Act

As always, magic tricks have captured my attention. So today I present you with my own magic trick. We’re going to make some text appear and disappear into thin "cyber" air. Unlike real magicians, I’ll show you how I did it.

First up we are going to need some text to assist us in performing our magical feat:

I don’t want to achieve immortality through my work…. I want to achieve it through not dying. -Woody Allen

Ok, now that we have our text we’ll want to add some CSS to it to make it a little more presentable. We’ll now wrap it in a <div> tag (paragraph <p> tags will work also).

<div>
  I don’t want to achieve immortality through my work… I want to achieve it through not dying. -Woody Allen
</div>

Next up we’ll add a special id tag that we will use to identify the div we want to manipulate, and also add our beginning class name so that our JavaScript has what it’ll need to make the switch.

<div class=”show” id=”container”>
  I don’t want to achieve immortality through my work… I want to achieve it through not dying. -Woody Allen
</div>

Now it’s time to get down to business. We’ll need to open our style sheet and add a new ID tag called "container". This, of course, can be whatever you would like to call it.

#container {
  padding: 5px;
  border: solid 1px #CCCCCC;
}

Now, for the sake of this tutorial, I won’t go into great depth making this particular <div> all fancy looking like Zombo.com, but I will put a border around it with a small amount of padding.

Next we’ll add in our two classes that actually make the text disappear and reappear on the screen.

.show {
  display: block;
}
.hide {
  display: none;
}

With our CSS and HTML out of the way it’s time to move on to the final part of our magic trick, the JavaScript.

<script type=“text/javascript” language=“javascript”>
function pimpIT(divID) {
  var item = document.getElementById(divID);
    if (item) {
    item.className=(item.className==’show’)?’hide’:’show’;
  }
}
</script>

Before we move on, I should give you a brief explanation of what the code above means. Basically the first line defines our function and what element it will effect. The name pimpIT is just something I came up with cause it sounded funny. That can be anything you’d like to call it. The three lines after it are what actually do the class name swap.

With that out of the way it’s time to assemble our document, and amaze our friends. Just as you have the link to your CSS file in the <head> part of your HTML file, you’ll also need to place the javascript there. Just make sure it’s before your closing “</head>” tag.

To make this all work you will now add the javascript function to a link on your page like so:

<a href=“#” Onclick=“pimpIT(‘container’); return false”>Show/Hide</a>

<div class=“show” id=“container”>
  <i>I don’t want to achieve immortality through my work… I want to achieve it through not dying.</i> -Woody Allen
</div>

Notice that in the function pimpIT, I did a call for all <div> tags with an ID of "container." That makes sure that only <div> tags that change are the ones that I’ve added to that particular ID.

You should end up with something like this:

function pimpIT(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className==’show’)?’hide’:’show’;
}
}

Show/Hide

I don’t want to achieve immortality through my work… I want to achieve it through not dying. -Woody Allen

Obviously this wouldn’t really be a good magic trick to use on an audience, but on a website this could be and effective way of doing things like navigation, menus, and image display.

Now get out there and have some fun!

Leave a comment