Webmaster & Internet
angeregt durch einen Beitrag im (X)HTML-Forum möchte ich zeigen, dass man eigentlich nur noch für den Internet-Explorer Javascript/jQuery braucht, um ein "Accordion" auf einer Web-Seite zu realisieren.
In meinem Funktionsbeispiel habe ich einen HTML-Seitenaufbau gewählt, der aus einer H1-Überschrift und mehreren folgenden DIV-Blöcken ("sections") besteht. Jeder "section"-Block ist mit einem Klassenattribut "section" markiert und enthält als erstes Kindelement wiederum eine Überschrift (hier: H2) mit einem eingeschlossenem Hyperlink (A-Element). Danach folgt beliebiger Blockinhalt.
HTML-Code:
<body> <div id="wrapper"> <h1><a href="#">Test: CSS3-Accordion</a></h1> <div id="block1" class="section"> <h2><a href="#block1">Block 1</a></h2> <p>Lorem <strong>ipsum</strong> dolor <em>sit</em> amet, ...</p> </div> <div id="block2" class="section"> <h2><a href="#block2">Block 2</a></h2> <p>Duis autem vel eum iriure dolor in hendrerit in ...</p> <p>Ut wisi enim ad minim veniam, quis nostrud exerci ...</p> </div> <div id="block3" class="section"> <h2><a href="#block3">Block 3</a></h2> <p>Nam liber tempor cum soluta nobis eleifend option ...</p> <p>Duis autem vel eum iriure dolor in hendrerit in ...</p> </div> <!-- usw.usf. --> </div> </body>
Die CSS-Formatierung der "section"-Blöcke ist schlicht und einfach, da für die Accordion-Funktion unwesentlich. Auf derzeit übliche Schönheitsoperationen wie runde Ecken, Text-und Box-Shadow sowie Animationen habe ich deshalb hier verzichtet:
Code css:
1 2 3 4 5 6 7 8 | .section {
margin: 1em 0;
border: 1px solid #639;
padding: 1em;
background-color: #eee;
}
.section > :first-child { margin: 0; }
.section > :last-child { margin-bottom: 0; } |
Code css:
1 | .section:not(:target) *:not(:first-child) {display: none;} |
Um alle "section"-Blöcke zu schließen muss man entweder das HTML-Dokument mit einer URI ohne #-Anhang anwählen oder aber mit einem URI-Anhang, der nur aus einem Doppelkreuz besteht. Dazu wurde im Funktionsbeispiel innerhalb der H1-Überschrift ein entsprechender Verweis aufgenommen, so dass beim Mausklick auf die Seitenüberschrift alle "section"-Blöcke geschlossen werden.
Das funktioniert mit allen derzeit gebräuchlichen Browsern mit Ausnahme des Internet-Explorer einschließlich Version 8, dem man am besten per Javascript bzw. jQuery nachhelfen muss. Ich habe das mit jQuery innerhalb von "Conditional Comments" realisiert. Wenn man das Script wegläßt oder jQuery bei Google nicht erreicht werden kann, dann erscheinen im Internet-Explorer alle "section"-Blöcke im geöffneten Zustand.
Erfolgreich mit folgenden Browsern getestet:
Firefox 2 und 3, Internet-Explorer 6..8, Chrome 8, Safari 5, Opera 11.
Hier der komplette Quelltext des Funktionsbeispiels und im Anhang als ZIP-Datei:
HTML-Code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3-Test: Accordion</title> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; text-align: center; font-family: Helvetica, Arial, sans-serif; font-size: 100.01%; color: #000; background-color: #fff; } #wrapper { position: relative; width: 36em; margin: 0 auto; text-align: left; } .section { margin: 1em 0; border: 1px solid #639; padding: 1em; background-color: #eee; } .section > :first-child { margin: 0; } .section > :last-child { margin-bottom: 0; } .section:not(:target) *:not(:first-child) { display: none;} </style> <!--[if lt IE 9]> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> if(typeof(jQuery)!="undefined") { $(document).ready(function() { accFkt(); }); function accFkt() { // first-child- und last-child-Nachhilfe für IE: $('.section > :first-child').addClass('first'); $('.section > :last-child').addClass('last'); // alle Section-DIV-Blöcke schließen: $('.section').addClass('hidden'); // Klick-Event: $('a[href^="#"]').click(function() { // alle Section-DIV-Blöcke schließen: $('.section').addClass('hidden'); // angeklickten DIV-Block öffnen: $(this).parents('.section').removeClass('hidden'); }); } } </script> <style type="text/css"> /* first-child- und last-child-Nachhilfe für IE: */ .first, .first a { display: block !important; margin: 0; } .last { margin-bottom: 0; } /* target-Nachhilfe für IE: */ .hidden * { display: none; } </style> <![endif]--> </head> <body> <div id="wrapper"> <h1><a href="#">Test: CSS3-Accordion</a></h1> <div id="block1" class="section"> <h2><a href="#block1">Block 1</a></h2> <p>Lorem <strong>ipsum</strong> dolor <em>sit</em> amet, ...</p> </div> <div id="block2" class="section"> <h2><a href="#block2">Block 2</a></h2> <p>Duis autem vel eum iriure dolor in hendrerit in ...</p> <p>Ut wisi enim ad minim veniam, quis nostrud exerci ...</p> </div> <div id="block3" class="section"> <h2><a href="#block3">Block 3</a></h2> <p>Nam liber tempor cum soluta nobis eleifend option ...</p> <p>Duis autem vel eum iriure dolor in hendrerit in ...</p> </div> <div id="block4" class="section"> <h2><a href="#block4">Block 4</a></h2> <p>At vero eos et accusam et justo duo dolores et ea rebum...</p> </div> <div id="block5" class="section"> <h2><a href="#block5">Block 5</a></h2> <p>Consetetur sadipscing elitr, sed diam nonumy eirmod ...</p> </div> </div> </body> </html>
Login
Bereiche
Kategorien
Forum - Webmaster & Internet
tutorials.de-Systemmitteilung