Beispiel: ohne großes Framework
HTML:
<!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="sheet-current">
<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 class="sheet">
<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 type="text/javascript" src="accordion.js"></script>
</body>
</html>JavaScript:
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
'use strict';
// initialize focus object
function Accordion(){
this.sheets = [];
this.current = -1;
}
Accordion.prototype = {
selectCurrent: function (idx){
if (this.current != idx) {
if (this.current > -1) {
this.sheets[this.current].className = "sheet";
}
if (idx>-1) {
this.current = idx;
this.sheets[idx].className = "sheet-current";
}
}
},
init: function (accordion){
var self = this, idx = 0;
this.sheets = accordion.children;
for (var i=0; i<this.sheets.length; i++) {
if (this.sheets[i].className=="sheet-current") {
idx = i;
this.current = i;
} else {
this.sheets[i].className = "sheet";
}
this.sheets[i].sheetid = i;
this.sheets[i].addEventListener('mousedown', function (event) {
self.selectCurrent(this.sheetid);
event.preventDefault();
});
}
if (this.current != idx){
this.selectCurrent(idx);
}
}
};
var accordionList = document.querySelectorAll("ul.accordion");
for (var i=0; i<accordionList.length; i++) {
var accordion = new Accordion();
accordion.init(accordionList[i]);
}
})();
StyleSheet:
ul.accordion {
position: relative;
margin: 0;
padding: 5px;
list-style: none;
list-style-image: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
ul.accordion .sheet, ul.accordion .sheet-current {
position: relative;
margin: 0 0 1px 0;
padding: 7px 10px 1px 10px;
border: 1px solid #C8CED0;
background-color: #FFFFFF;
background-image: -moz-linear-gradient(top, #fcfcfc 91%, #ededed 100%);
-moz-border-radius: 4px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(91%, #fcfcfc), to(#ededed));
background-image: -webkit-linear-gradient(top, #fcfcfc 91%, #ededed 100%);
-webkit-border-radius: 4px;
background-image: -o-linear-gradient(top, #fcfcfc 91%, #ededed 100%);
-o-border-radius: 4px;
background-image: -ms-linear-gradient(top, #fcfcfc 91%, #ededed 100%);
-ms-border-radius: 4px;
background-image: linear-gradient(to bottom, #fcfcfc 91%, #ededed 100%);
border-radius: 4px;
}
ul.accordion .sheet .sheet-header, ul.accordion .sheet-current .sheet-header {
margin: 0 0 5px 0;
padding: 0;
color: #626B71;
height: 18px;
font-weight: bold;
font-size: 13px;
cursor: pointer;
}
ul.accordion .sheet {
max-height: 19px;
overflow: hidden;
transition: max-height 0.25s ease-out;
}
ul.accordion .sheet:hover {
background: #EFF1F1;
}
ul.accordion .current, ul.accordion .sheet-current {
height: auto;
max-height: 1200px;
padding-bottom: 7px;
overflow: hidden;
transition: max-height 0.25s ease-in;
}
share it: Google +1TwitterFacebookXing