Update!

Please view the new version of the Sliding Panels with moo.fx article. This one below is left for historical purposes.

---

As you will see all over this blog, I am a huge fan of moo.fx and I have shoehorned it into various aspects of this site. As my way of giving back to the opensource community I am going to share code for different pieces of the site that use moo.fx. The first component is a sliding panel.

The Task
In our implementation, a sliding panel is a component that has a toggle with text or an image that is used to open another element that is hiding content. The meta information and theme information links are examples of slide panels in action on our site and it takes remarkably little code to implement. Our twist is that we want to use ajaxian techniques and keep them search engine friendly.

Our Goals
As you may have noticed in other blog articles, we focus on SEO (Search Engine Optimization) and our implementation needs to keep that in mind. One common SEO problem is that people use Javascript to generate content or possibly mask content and the reason this can be unacceptable is that a BOT does not run Javascript so the content can be invisible or mangled. If you want to see it in action, find a site that uses Javascript and uses document.write functions to generate output. Go to your nearest Linux/Unix box and use lynx to view that page and you will see that the content is visible in Internet Explorer or Firefox but not lynx. The simplest reason is that lynx is a text only browser that does not use Javascript so what it sees is essentially what a spider will see.

We use several approaches to reduce the SEO complications, the first being that our content is inside of conventional DIV's. For example:

<div class="TSlidePanel">
  <div class="TSlideToggle">
    The text
  </div>
  <div class="TSlideContent">
    The content to hide.
  </div>
</div> 

The next thing is the no Javascript is allowed inside the BODY. There are many reasons that include SEO, keeping the content separated from the presentation and also to allow programs to tidy the HTML without concern for embedded Javascript.

The last bit is the Javascript that makes the magic happen. Before we dive into it, here is what we want to accomplish.

Our Requirements:
An arbitrary number of hidden sliders on any given page and not have to worry about conflicts.
Keeping the HTML as simple as possible.
No need or want to assign unique ID's.
Optionally changing a glyph to show the panel state.
No Javascript in the BODY.

Prerequisites:
You must have the moo.fx and moo.fx pack to use this code.

The demo:
It is all over this site, so a demo is redundant.

The Javascript:

function getDescendantNode(parent, className) {  
  if (parent.className == className)
    return parent;
    
  var list = parent.childNodes;
  if (list == null) return null;
  for (var i=0; i<list.length; i++) {
    var child = list.item(i);
    if(child.className == className)
      return child;
    
    child = getDescendantNode(child, className);
    if (child != null)
      return child;
  }
  
  return null;
}
 
function RegisterEvent(obj, evType, fn, useCapture){
  if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    return true;
  } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be attached");
  }
  return true;
};
 
// Walks a form to hook up all slide panels
function TSlidePanels() {
}
 
TSlidePanels.prototype.Init = function() {
  document.getElementsByClassName('TSlidePanel').each(function(element) {  
    var aGlyphOpen = '';
    var aGlyphClose = '';
    var aSlider = getDescendantNode(element, 'TSlideContent');
    var aToggle = getDescendantNode(element, 'TSlideToggle');
    var aGlyph = getDescendantNode(element, 'TSlideGlyph');
    
    if (aGlyph != null) {
      aGlyphOpen = aGlyph.id + '-open';
      aGlyphClose = aGlyph.id + '-close';
      
      aGlyph.id = aGlyphOpen;
    }
        
    aToggle.SlidePanel = new TSlidePanel();
    aToggle.SlidePanel.Init(aSlider, aGlyph, aGlyphOpen, aGlyphClose);
 
    RegisterEvent(aToggle, 'click', aToggle.SlidePanel.Toggle, true);
  });
}
 
// Creates a collapsing panel.
function TSlidePanel() {
  this.effectObject = null;
  this.sliderElement = null;
  this.glyphElement = null;
  this.openClass = null;
  this.closeClass = null;
  this.opened = false;
};
 
TSlidePanel.prototype.Init = function(aSlider, aGlyph, aOpen, aClose) {
  this.sliderElement = aSlider;
  this.glyphElement = aGlyph;
  this.openClass = aOpen;
  this.closeClass = aClose;
};
 
TSlidePanel.prototype.Toggle = function() {
  if (this.SlidePanel.effectObject == null) {
    var self = this;
    this.SlidePanel.effectObject = new fx.Height(this.SlidePanel.sliderElement , {duration: 500, onComplete: function() {
        if (self.SlidePanel.glyphElement) {         
          if (parseInt(self.SlidePanel.sliderElement.style.height) == 0) {
            self.SlidePanel.glyphElement.id = self.SlidePanel.openClass;
          } else {
            self.SlidePanel.glyphElement.id = self.SlidePanel.closeClass;  
          }
        }
      }
    });
  }
  this.SlidePanel.effectObject.toggle();    
}; 

Initialization:

We initialize the code by calling the Init function during the onload event of the browser. To facilitate this we call RegisterEvents and let it call our initialization function when the page loads.

var allSliders = new TSlidePanels();
 
function onBodyInit() {  
  allSliders.Init();  
}
 
RegisterEvent(window, 'load', onBodyInit, true); 

Believe it or not, that is all there is to the code but it works pretty well as can be seen on the site. If enough people request it, we will make a demo and provide a ZIP to download. But as it stands if you know moo.fx, this example should be pretty straightforward.

---