JavaScript Accordion

Beispiel: ohne großes Framework
HTML:
accordion.htm HTML (1,43 kByte) 03.09.2020 23:22
<!DOCTYPE html >
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Accordion</title>
    <link rel="stylesheet" type="text/css" href="accordion.css" />
  </head>
  <body>
    <ul class="accordion">
      <li class="active">
        <h4 class="sheet-header">Udo</h4>
        <div class="imageLeft"><img border="0" height="115" width="100" src="/media/udo.jpg" alt="Udo Schmal" title="Udo Schmal" /></div>
        <h5>Udo Schmal</h5>
        <p><strong>Softwareentwicklung</strong></p>
        <table summary="Kontakt" class="noBorder">
          <tbody>
            <tr>
              <td>E-Mail:</td>
              <td><a href="mailto:udo.schmal@t-online.de">udo.schmal@t-online.de</a></td>
            </tr>
          </tbody>
        </table>
      </li>
      <li>
        <h4 class="sheet-header">Claudia</h4>
        <div class="imageLeft"><img border="0" height="115" width="100" src="/media/claudia.jpg" alt="Claudia Schmal-Prangs" title="Claudia Schmal-Prangs" /></div>
        <h5>Claudia Schmal-Prangs</h5>
        <table summary="Kontakt" class="noBorder">
          <tbody>
            <tr>
              <td>E-Mail:</td>
              <td><a href="mailto:claudia.prangs@t-online.de">claudia.prangs@t-online.de</a></td>
            </tr>
          </tbody>
        </table>
      </li>
    </ul>
    <script src="accordion.js"></script>
  </body>
</html>
JavaScript:
accordion.js JavaScript (1,11 kByte) 03.09.2020 23:31
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
  'use strict';
  function Accordion(accordion) {
    var multiselect = accordion.getAttribute('data-multiselect') || false;
    var current = null;
    var sheets = accordion.children;
    function toggle(event) {
      if (multiselect) {
        this.classList.toggle("active");
      } else {
        if (current != this) {
          if (current) {
            current.classList.remove("active");
          }
          current = this;
          this.classList.add("active");
        }
      }
      event.preventDefault();
    }
    for (var i=0; i<sheets.length; i++) {
      if (!multiselect && sheets[i].classList.contains("active")) {
        current = sheets[i];
      } else if (!multiselect && i==0) {
        current = sheets[i];
      }
      sheets[i].addEventListener('mousedown', toggle);
    }
    current.classList.add("active");
  }

  var accordionList = document.querySelectorAll("ul.accordion");
  for (var i=0; i<accordionList.length; i++) {
    new Accordion(accordionList[i]);
  }
})();
StyleSheet:
accordion.css StyleSheet (801 bytes) 03.09.2020 23:29
ul.accordion {
  font-family: Arial,sans-serif;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
}
ul.accordion .sheet-header {
  margin-top: 0;
}
ul.accordion > li {
  margin: 0 0 1px 0;
  padding: 7px 10px 1px 10px;
  border: 1px solid #C8CED0;
  background-color: #fff;
  border-radius: 4px;
  max-height: 24px;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}
ul.accordion > li:not(.active):hover {
  cursor: pointer;
}
ul.accordion > li.active {
  height: auto;
  max-height: 1200px;
  padding-bottom: 7px;
  box-sizing: border-box;
  transition: max-height 0.25s ease-in;
  overflow: hidden;
}
ul.accordion > li .sheet-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #666;
  font-weight: bold;
}

Author: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany





+49 2831 9776557
+49 1575 0663676
+49 2831 1328709
SMS
WhatsApp

Instagram Profile
vCard 3.0

Service Infos

CMS Info Product Name:
UDOs Webserver
Version:
0.4.2.101
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Mon, 18. Jan 2021 23:28:31
Development Info Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64
System Info OS:
Ubuntu 20.04.1 LTS (Focal Fossa)
Hardware Info Model:
Hewlett-Packard HP Pavilion dv7 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2450M CPU @ 2.50GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 2274.761 MHz