SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Steve's Behaviors : bubble Behavior

The bubble behavior makes it easy to toggle the display of elements. In Internet Explorer 5.0, you can expand and collapse the outline below. In all other browser, the list is displayed completely expanded, and the behavior is ignored.

  1. Heading 1
    • Sub Heading A
    • Sub Heading B
  2. Heading 2
    • Sub Heading I
    • Sub Heading II

This is the BUBBLE.htc behavior. It supports the following properties: targetID, the ID of the object you want shown/hidden, startHidden, automatically hides the targetID when the document loads, and group, to group multiple elements so only one of the element's targetID is shown. The method, bubblo(), on the element is used to manually toggle the display. When the user clicks on the element, this method is automatically called.

The first list item is defined as follows:

<li style="behavior: url(bubble.htc); 
           cursor: hand" 
    targetID=bb1 
    startHidden 
    group="bbDemo">Heading 1

Page 1:Steve's Behaviors
Page 2:move Behavior
Page 3:fade Behavior
Page 4:bubble Behavior
Page 5:type Behavior
Page 6:switch Behavior
Page 7:over Behavior
Page 8:float Behavior