www.mathertel.deThe AJAX EngineSamples 4: visual effectsAccordionDemo.aspx
View Source

Simple sliding sample to move HTML elements around

The space on a page is limited in many ways. Of course we can write lengthy pages and home the user will scroll down to the end of the page to find all the content. Another option is using some show/hide effects.

One these space saving visual effects is the accordion menu that enables a user to open a new region while the others close automatically.

Opening and closing the panels is implemented using smooth size transitions.

Have a try with the sample on the right side.

The HTML elements

The HTML elements we need are simple nested <div> elements for the headers and the content regions:

<div id="a_menu" class="VEACCORDION">
  <div class="VEACCORDIONHEADER">A header text</div>
    The content comes here.

The JavaScript implementation

The effect is implemented using a JavaScript Behavior named AccordionBehaviour that is attached to the outermost <div> element. It captures the clicks and will start the transitions when a non active header was clicked. The implementation of this behavior can be find inside the Accordion.js file in the controls folder.

The onclick event is captured to call the SlideOpen method that prepares the size transitions. Then a timer is used to call the internal _resizeItem method that is changing the size of the panels in small steps to produce a smooth transition.

See: Accordion.js source code.

To attach this implementation to the outpermoste <div> element we need one line of code:

jcl.LoadBehaviour("a_menu", AccordionBehaviour);

The CSS classes

The style of the accordion menu is defined using the following class names:

VEACCORDION: is the class name of the outermost element.

VEACCORDIONHEADER: is used for an inactive header element.

VEACCORDIONHEADERACTIVE: is used for the only active header element.

VEACCORDIONCONTENT: is used for the region of an invisible content area.

VEACCORDIONCONTENTACTIVE: is used for the region of the only visible content area.

The acutal implementations for these class names are:

.VEACCORDION {padding-top:2px;}
.VEACCORDIONHEADER {background-color:gray;color:white}
.VEACCORDIONHEADERACTIVE {background-color:orange;color:black}

  border-top:1px solid #203050;border-left:1px solid #203050;border-right:1px solid #203050}

  padding:0px;height:0px;margin-bottom:2px;overflow:hidden; }
  padding:2px;margin-bottom:2px;overflow:hidden; background-color:#FFFFCC}
  border-bottom:1px solid #203050;border-left:1px solid #203050;border-right:1px solid #203050}


This page is part of the http://www.mathertel.de/ web site.