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>
    <section>
      <p>Some content...</p>
    </section>
  </div>

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 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;
  }