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 cards is implemented using smooth size CSS transitions.

Have a try with the sample on the right side.

The HTML elements

The HTML elements used for the Accordion is a <div> element for the Accordian and the cards and a header and section element for ste structure of each card.

<div id="themenu" class="Accordion">
  <div class="card">
    <header>Header text</header>
      <p>Some content...</p>

The JavaScript implementation

Update 2016:

The original implementation used a timer to change the sizes of the content areas. The new implementation uses a CSS3 Transition that avoids the timer completely.

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 SlideOpen method will then adjust the style height according to the clicked card and the CSS transition will create the 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 and rules

The style of the accordion menu is defined using the "Accordion" class name and the rules for the visualization uses the html elements header and section.

The activated card has the "activated" classname in adition.

.Accordion {
  border: 1px solid #203050;
  background-color: #FFFFCC;

  .Accordion > .card > header {
    background-color: gray;
    color: white;
    padding: 2px;
    cursor: pointer;
    border: 1px solid #203050;

  .Accordion > .card.active > header {
    background-color: orange;
    color: black;
    height: 2em;

  .Accordion > .card > section {
    padding: 0;
    margin: 0;
    overflow: hidden;
    transition: height 0.5s;

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