www.insideDHTML.com
Inside Dynamic HTML | Fun and Games | The 10K Demo | XML Online | CSS Online | Resources
Write Once! | DHTML Toolkits | Inside Techniques | Inside Scriptlets

Inside Techniques/

 
Introduction
moveo FunctionIE4
fadeo FunctionIE4
bubblo FunctionIE4
typeo FunctionIE4
switcho FunctionIE4
scrollo FunctionIE3,IE4,NS3,NS4
isie4 FunctionIE4
profileo FunctionIE4
Anchor FunctionsIE4
Path FunctionsIE4

styleo FunctionsIE4

Download Library
 

bubblo() Function

The bubblo() function makes it easy to show and hide information on your web page. This is useful when you want to create expanding outlines, or when you want small amounts of information to appear with a heading. 

To use this function, you must an HTML element that you want to hide or show. This element must have an unique HTML ID. If you want the element to start initially hidden, set the style DISPLAY property to "none": 

 <P ID=demo STYLE="display: none">This is initially hidden.</P>

To later display or hide the element, you call the bubblo() function and pass in the element you want to hide or show.

Grouping Elements

The bubblo() function also supports a second optional argument that allows you to create mutually exclusive lists of elements to display (similar to selecting from a radio button group). In the following example, only one of the following two elements is displayed at a time: 

<div id=content_1 style="display: none">This is a great piece of info</div>
<div id=content_2 style="display: none">This is some cool trivia</div>
<span onclick="bubblo(content_1, 'contents')">Show 1</span><br>
<span onclick="bubblo(content_2, 'contents')">Show 2</span>

bubblo() Function

function bubblo(x,y) {
        if (y != null) {
                eval("p = document." + y);
                if (p != null) {
                        p.style.display = "none";
                }
                if (p != x) {
                        x.style.display = "";
                        eval("document." + y + " = " + x.id);
                } else {
                        eval("document." + y + " = null");
                }
        } else {
                if (x.style.display == "none") {
                        x.style.display = "";
                } else {
                        x.style.display = "none";
                }
        }
}

Copyright © 1997-98 InsideDHTML.com, LLC.
All rights reserved.