So You Want To Toggle, Huh? Method One

By Joe Burns

http://www.htmlgoodies.com/beyond/dhtml/article.php/3470631/So-You-Want-To-Toggle-Huh-Method-One.htm (Back to article)

     First things first... This is a tutorial dealing with DHTML. You need to be running an Internet Explorer browser, 4.0 level or better, to see the effect.

Joe-ah Webster's Dictionary:

Here's What I'm Talking About

     The truth is, since the MSIE and Navigator browsers are moving in such different directions, it's hard to create one definitive statement that covers the effect. In one of my computer books, the author refers to making a layer appear and disappear as "toggling". I thought was as good a term as any.

     But no matter what you name it--the effect will still be as sweet. (That's Bill Shakespeare. I'm a cultured man you know.)

Toggling with MSIE

But it's still really cool.

     Oh, that's neat. And it's not that hard of an effect either. Basically what's happening is I have positioned a division on the page. In that division I put table cell with the words "How About This?" inside, but just about anything can be put in the division.

Make the Division Appear

Make It Appear

     That one purple line is pretty long, huh? Yeah. It can be broken down, if you really want, into multiple document.write statements, but why? It's just more typing for the same effect. I've got better things to do! OK, actually I don't, but I still hate writing things I don't have to.

     So, what does it do? Nothing. It won't do anything until it's called upon by its function name later in the page. Let's tear it apart:

• This is a JavaScript, so we have to start with the familiar "SCRIPT LANGUAGE=" tag.

• The function is named ShowIt(). Note that fancy brackets always surround the JavaScript commands that make up the event that the function performs. Now the magic:

• We begin with a hierarchy statement that uses commands that are proprietary to MSIE. That's a nice way of saying that only Explorer understands them. It's DHTML.

• document.body.insertAdjacentHTML represents to the IE browser that whatever follows is to go on the document, in the body, and what follows in parentheses is to be inserted as HTML.

       In case you're wondering, and I know you are, there's also the command: insertAdjacentText. It works the same way except it handles what appears in the following parentheses as text alone and does not compile it into HTML. Actually there are a long list of insert commands in DHTML. But that's another tutorial.

• Inside the parentheses, the first command deals with where this little division should display in terms of the command that is calling for it. This doesn't come into play much in this scenario because we are calling on this division from a function and not from inside of an HTML command. But you still need to put something in there to denote where the inserted HTML will appear or the format throws an error.

       'BeforeEnd', means that the division should appear at the end of the element before the end tag. There are actually three others you can play with if you take this format and embed it into an HTML tag:

  • BeforeBegin: the item will be inserted in front of the tag.
  • AfterBegin: the item will be inserted after the tag, but before the text.
  • AfterEnd: the items will be inserted after the end tag.

• Now we get to the element that will be inserted. It's a division that as been positioned and given the NAME "TheTip" so we can call on it later. It looks like this:
  <DIV STYLE="position:absolute; TOP:35px; LEFT:410px" ID="TheTip">

       In terms of the effect, the positioning is very important. If you decide to have multiple divisions popping up over a series of links, then you need to have each one positioned so that they pop up at the right place.
       Or, as I've seen it done, have them all appear in the exact same place. Great effect. One just lays right over the other. It's like a little billboard popping up.
       You know what I've found with positioning? It's best to be most concerned with the pixels from the top and go real easy on the pixels from the left. Also - go easy on the concept ABSOLUTE POSITIONING. There are too many screen resolutions and sizes out there to be over concerned. Use the command positioning:absolute, but keep in mind that you're only going to get "pretty close" positioning. It'll keep your blood pressure down.

• What follows in the division is a basic one celled table with a purple background. It may look a little strange because it is all on one line, but that's all it is.

• The </DIV> tag kills the line of text.

• The second curly bracket and the </SCRIPT> wrap up the entire format.

     Now...take that function and stick it in between <SCRIPT LANGUAGE="javascript"> and </SCRIPT> commands and put that between the <HEAD> tags. So now, you understand and posses a function that will make the division appear. But can you make it disappear again? Here's how.

Make the Division Disappear

     This one's pretty easy to figure out even if DHTML is brand new to you. The function, named LoseIt() simply sets two sections of the division to represent nothing. In other words...it disappears.

     Remember...the name of the division is "TheTip". Go ahead and look at the appear function again if you missed that point. It's important. In this function we set two parameters, innerHTML and outerHTML, to nothing. Note the empty quote marks. The end. No more visible division. Very clever.

     Now, take that code and stick it between <SCRIPT LANGUAGE="javascript"> and </SCRIPT> commands and put that in between the <HEAD> tags.

      OK, now we're set. We can call for the division in the first function any darn time we feel like it.

Call For The Division

The Hypertext Link:

<A HREF="http://www.htmlgoodies.com"
onMouseOver="ShowIt()" onMouseOut="LoseIt()">Hey Man!</A>

The Form Buttons

<FORM>
<INPUT TYPE="button" Value="let me see it" onClick="ShowIt()">
<INPUT TYPE="button" Value="OK, Take it Away" onClick="LoseIt()">
</FORM>

     There's no real science to it. I've called for the functions through basic onMouseOver and onMouseOut Event Handlers.

More Divisions

      The only downfall, if you want to call it that, is that each of these divisions are an element in their own right. They each have a NAME attribute assigned. Thus...you need to create a totally new function to make the division appear and disappear.

     For example, let's say you already have the division described in this tutorial installed on a page. You want a second one. Here's what you need to do:

• Create a whole new function that makes the division appear. The easiest method would be to copy and paste the current appear function and change its name. The current appear function is named ShowIt(). You could simply change the name to ShowIt2().

• You need to go into the division itself and change out:
  • The TOP and LEFT positioning pixels
  • The NAME of the division
  • What is contained in the division

• Finally, copy and paste the function that makes the first one disappear. Again, you need to make a few changes:
  • The name of the function. The current function is named LoseIt(). You could simply change the new function name to LoseIt2().
  • The NAME element of the innerHTML and outerHTML statements. Remember that they are currently attached to the first division named "TheTip". You need to change "TheTip" to whatever you named this new division.

     Now you're good to go with a second division. Yes, it's a little work, but the results are great.

A Final Note

     Got it? Great. Now go learn to toggle with Netscape's Layers.

Enjoy!