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

Accordion

Oft benötigt man nur eine minimalistische Ausführung, statt ein gesamter Plugin. Hier werden wir mit css ein Accordion programmieren.

siehe auch

jQuery-Accordion

Html

Für unser Akkordeon verwenden wir eine einfach Div-Struktur. Denkbar sind aber sicher auch andere Szenarien. Man kann bspw. das dl-tag nutzen, hier wären die dt-tags sichtbar und die dd-tags werden angezeigt.

<div class="acc_head">
  <a href="#step1">Step 1</a>
</div>
<div id="step1" class="acc_content">
  <p>dorum lipsum </p>
</div>

<div class="acc_head">
  <a href="#step2">Step 2</a>
</div>
<div id="step2" class="acc_content">
  <p>dorum lipsum </p>
</div>

<div class="acc_head">
  <a href="#step3">Step 3</a>
</div>
<div id="step3" class="acc_content">
  <p>dorum lipsum </p>
</div>

<div class="acc_head">
  <a href="#step4">Step 4</a>
</div>
<div id="step4" class="acc_content">
  <p>dorum lipsum </p>
</div>

Die class dienen hier nur dem styling mit css.

Css-Style

*{
  margin: 0;
  padding: 0;
}

a{
  text-decoration:  none;
}

a:hover{
  text-decoration: underline;
}


body{
  background: silver;
}

#wrap{
  margin: 2% 1% 2% 1%;
  background: #fff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding-top: 1em;
  padding-bottom: 2em;
}

.acc_head, .acc_content
{
  margin-left: 4%;
  margin-right: 4%;
  border: 1px solid rgb(204, 204, 204);
  display: block;
}

.acc_head + acc_content:first-child{ height: auto;}

.acc_head
{
  margin-top: 2%;
  padding: 0.5em;
  background: #0c8da9;
  color: #fff;
  -webkit-border-top-left-radius: 6px;
  -moz-border-top-left-radius: 6px;
  border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-top-right-radius: 6px;
  border-top-right-radius: 6px;
}

.acc_head a
{
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.acc_content
{
  border-top: none;
  overflow: hidden;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-bottom-left-radius: 6px;
  border-bottom-left-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-bottom-right-radius: 6px;
  border-bottom-right-radius: 6px;
  -webkit-transition: height 2s ease;
  -moz-transition: height 2s ease;
  -o-transition: height 2s ease;
  transition: height 2s ease;
}

.acc_content p{margin: 0.5% 0 0 1%;}

#wrap .acc_content:not(:target){height: 0;}

#wrap .acc_content:target{height: 6em;}

#wrap a.ie:hover .acc_content,
#wrap a.ie:focus .acc_content
{
  height: auto;
  text-decoration: underline;
}

Ergebnis

Hier nun könnte ihr unser Akkordeon in Action erleben.

Example