Source Code

for file /controls/Accordion.js

// Accordion.js
// Javascript Behaviour for the AccordionBehaviour Control
// Copyright (c) by Matthias Hertel, http://www.mathertel.de
// This work is licensed under a BSD style license. See http://www.mathertel.de/License.aspx
// ----- 
// 13.05.2007 created by Matthias Hertel
// 18.12.2007 Simplifications and documentation.
// 12.01.2008 adding postback-support by saving the current open area.
// 06.12.2016 using CSS transitions instead of a timer and script.

var AccordionBehaviour = {
  /// <summary>Implementation of a JavaScript Behavior for a accordion control.
  /// This control implements a space saving visual effect with multiple stacked
  /// areas of content. There is only one of the content areas visible.
  /// Any other area can be made visible by clicking into the associated title.</summary>

  _openarea: 0, /// <summary>number of the part that is visible.</summary>
  _cards: null, /// <summary>collection of the cards of the Accordian.</summary>

  init: function () {
    /// <summary>Initialize the component and show the last open area.</summary>
    this._openarea = 0;
    this._cards = this.getElementsByClassName("card");
    this.SlideOpen(this._cards[0]);
  }, // init

  // --- events

  onclick: function (evt) {
    /// <summary>Handle click events for opening a new accordion area.</summary>
    evt = evt || window.event;
    var obj = evt.target || evt.srcElement;
    if (obj.tagName == "HEADER")
      this.SlideOpen(obj.parentNode);
  }, // onclick


  // --- public methods

  SlideOpen: function (selCard) {
    /// <summary>Adjust height of cards
    for (var n = 0; n < this._cards.length; n++) {
      var c = this._cards[n];
      var s = c.getElementsByTagName("section")[0];
      if (c == selCard) {
        c.classList.add("active");
        s.style.height = s.scrollHeight + "px";
      } else {
        c.classList.remove("active");
        s.style.height = "0px";
      } // if
    } // for
  } // SlideOpen
}; // AccordionBehaviour
// End

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

For updates and discussions see http://ajaxaspects.blogspot.com/.