Show/hide glossary page in YUI

Question

Hello All,

I am trying to develop a toggle function like http://www.lutsr.nl/yui/toggle/

But it works a little different as them. When user enters the glossary page, he sees a full list of Alphabet with all the techical terms explaination

All — A | B | C | E | G | H | M | P | Q | R | S | T | U | Z |

ActiveSync® Microsoft® ActiveSync est l’ application permettant à un pocket pc d’ échanger des informations avec un ordinateur . Le Pocket PC doit utiliser Microsoft Windows Mobile™ ou Windows CE.

Bluetooth® Le Bluetooth permet aux informations d’ être transmises entre les appareils électroniques qui ont le Bluetooth. Si vous utilisez le Bluetooth, vous n'avez pas besoin de connecter les périphériques à l'aide de câbles.

.............................

1. If the user clicks B Alphabet, the rest of content will hide, except B. and B will be move to top of the section.

2. If the user clicks All aplphabet, the whole list will be reset.

What I have now, it is able to show/hide and listen to click event. Here is my source code:

<a href="#A" class ="toggle" rel="A_section,fade,20"> A</a> |
            <a href="#B" class ="toggle" rel="B_section,fade,20"> B</a> |

Script:

//Load JavaScript Ready event.
     this.toggleLinks=YAHOO.util.Dom.getElementsByClassName("toggle");
     for(var i=0; i<this.toggleLinks.length; i++) {
     YAHOO.util.Event.addListener(this.toggleLinks[i], "click", this.animateElements,this);
     }

toggleElements : function(e,controlNode,refEl) { if(controlNode && refEl) { if(YAHOO.util.Dom.hasClass(refEl,"show")) { YAHOO.util.Dom.removeClass(controlNode,"selected"); YAHOO.util.Dom.removeClass(refEl,"show"); } else { YAHOO.util.Dom.addClass(controlNode,"selected"); YAHOO.util.Dom.addClass(refEl,"show"); } } // to disable control node's default behaviour return false; }, animateElements : function(e,obj) { // obj = javascript toggle object // this = link clicked YAHOO.util.Event.preventDefault(e);

    if(this.rel) {
          controlNode = this;
    }
    if(typeof(controlNode) == "string") {
          controlNode = YAHOO.util.Dom.get(controlNode);
    }

    // objParameters
    // [0] = object id
    // [1] = animation type (fade, slide)
    // [2] = animation duration (seconds)
    var linkClicked = this;
    var objParameters = controlNode.rel.split(",");
    var refEl = YAHOO.util.Dom.get(objParameters[0]);
    var objStatus = YAHOO.util.Dom.hasClass(refEl,"show"); // if true, object is shown

    switchClasses = function() {
        obj.toggleOtherElements(e,linkClicked,refEl);
        obj.toggleElements(e,linkClicked,refEl);
    }

    if(objParameters[1] == "fade") {
        if(objStatus == true) {
            var attributes = {
                opacity: {from: .999, to: 0}
            }
            var objAnim = new YAHOO.util.Anim(objParameters[0],attributes);
            objAnim.useSeconds = false;
            objAnim.duration = objParameters[2];
            objAnim.onComplete.subscribe(switchClasses);
            objAnim.animate();
        } else {
            YAHOO.util.Dom.setStyle(objParameters[0],"opacity",0);
            switchClasses();
            var attributes = {
                opacity: {from: 0, to: .999}
            }
            var objAnim = new YAHOO.util.Anim(objParameters[0],attributes);
            objAnim.useSeconds = false;
            objAnim.duration = objParameters[2];
            objAnim.animate();
        }
    } else if (objParameters[1] == "slide") {
            // not implemented yet
    } else {
        // NO ANIMATION - switch classes
        switchClasses();
    }
},
    toggleOtherElements : function(e,linkClicked,refEl) {
    // toggle selected state of other elements pointing to the same source
    for(var i=0; i<this.toggleLinks.length; i++) {
        var objParameters = this.toggleLinks[i].rel.split(",");
        var linkClickedParameters = linkClicked.rel.split(",");

        if(objParameters[0] == linkClickedParameters[0]) {
            if(YAHOO.util.Dom.hasClass(this.toggleLinks[i],"selected")) {
                YAHOO.util.Dom.removeClass(this.toggleLinks[i],"selected");
            } else {
                YAHOO.util.Dom.addClass(this.toggleLinks[i],"selected");
            }
        }
    }
    }