humans.txt

Humans txt

Ist keine Erfindung von mir. Sondern ein Projekt, um die Menschen hinter einer Webseite kennen zu lernen. Hier die Projektseite von humans.txt

Team

Chef: Rocco Wernicke
Contact: r.wernicke-schleswig[at]email.de
From: Deutschland

Site

Last update: 2015/03/10
Language: Deutsch
Doctype: HTML5
TECHNOLOGY: Html5, Css3, jQuery, Modernizr
IDE & Software: Sublime Text, Notepad++, Netbeans, PhpStorm, FileZilla, Gimp
 
Ansicht
Sie befinden sich definitiv hier: [ zur Startseite ]Pages » Tutorial »

Sidebar Open Mediaquerie anzeigen

Akkordion

Motivation

Meine Idee war mich einmal mit der Funktionsweise eines Akkordeons beschäftigen. Sicher kann ich mir eines herunterladen, einbinden und gut. Deswegen weiß ich aber nicht genau, wie es funktioniert. Also frisch ans Werk.

siehe auch

Wer eine ausgefeilte Variante für seine Webseite sucht, wird auf der Homepage von jQuery-Ui fündig.
Eine css3-Variante findet ihr hier.
Das ganze als Mini-Accordeon-Plugin bekommt ihr auf dieser Seite. Dieses Plugin beinhaltet den auf meiner Seite gezeigten Javascript-Code.

Schlüsselworte

Aufbau

Als erstes müssen wir uns überlegen, wie wir unser Akkordeon aufbauen wollen. Dazu nehme ich folgenden Html-Aufbau.

 
Klick mich<⁄div>

Dorum lipsum ...<⁄p> <⁄div>

Klick mich<⁄div>

Dorum lipsum ...<⁄p> <⁄div>

Klick mich<⁄div>

Dorum lipsum ...<⁄p> <⁄div>

jQuery-Code

var accordeon = function(head, content)
{
    /** prüfen ob der ob ein Bereich offen ist*/
    if(!content.length && !head.length) return;
    
    /**content verbergen*/
    content.hide();
    
    head.click(function()
    {
      head.removeClass('current');
      content.not(":hidden").slideUp('slow');
      var current = $(this);
      
      $(this).next().not(":visible").slideDown('slow', function()
      {
        current.addClass("current");
      });
      
    });
};

$(document).ready(function()
{
  accordeon($('.accord_header'), $('.accord_content'));
});



Ergebnis

Hier seht ihr wie man mit ein paar Zeilen jQuery-Code zu ganz passablen Ergebnissen kommen kann.

Example