Accordion ♥♥

Hi hier ist Michi alias Someday und hier kommt gerade echt...


der erste HTML-Beitrag von mir auf CopyPasteLove. Dabei dachte ich immer ich werde nie einen Beitrag über HTML hinkriegen.
Ich möchte euch aber  nun zeigen wie man so ein Akkordion hinbekommt.
Eintrag 2
Eintrag 3

der gesamte Code:
Ihr könnt ihn in einem neuen Post oder in ein Widget in der Sidebareinfügen, indem ihr folgenden Code in der HTML-Schreibfunktion einfügen.

<div class="accordeon">
<div class="entry">
Eintrag 1
<br />
<br />
<br />
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br />
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br />
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
</div>
<div class="entry">
Eintrag 2
<br />
</div>
<div class="entry">
Eintrag 3
<br />
</div>
</div>
<style type="text/css">
*Akkordeon*/
.accordeon {
}
.entry {
width:100%;
height:50px;
border-bottom:1px solid #333;
cursor: pointer;
overflow: hidden;
text-shadow:1px 1px 0px #fff;
box-shadow:0px 1px 0px #fff;
transition: height 0.7s; ease-out ;
-webkit-transition: height 0.7s; ease-out ; /*Prefixr.com*/
-moz-transition: height 0.7s;ease-out;
-o-transition: height 0.7s;ease-out;
-ms-transition: height 0.7s;ease-out;
}
.entry:hover {
height:150px
}
</style>




ERKLÄRUNG:

1.Schritt: HTML Code


<div class="accordion">
<div class="entry"> die class-Funktionen sind später im CSS wichtig, hier wird dann das"accordion" und "entry" angesprochen und ein "aussehen bzw. eine Aktion" verpasst.

Eintrag 1 der erste Eintrag der sichtbar ist, wenn das Accordion noch nicht aufgeklappt ist

<br />
<br />
<br />

Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br />
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br />
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 

</div>  hiermit wird der erste entry-Eintrag geschlossen

<div class="entry">

Eintrag 2
</div>

<div class="entry">
Eintrag 3 </div>
</div> dieses div schließt das ganze Accordion 

2.Schritt: CSS einbinden:


<style type="text/css"> hiermit sage ich im HTML-Dokument, das jetzt eine CSS auf das zuvor geschriebene HTML angewandt werden soll.

*Akkordeon*/ Das ist quasi eine Notizfunktion im CSS, damit kann ich mir mit /*Text*/ irgendwas dazuschreiben... falls man sich z.B. was nicht merken kann.

.accordeon { Hier fehlen eigentlich zwischen {} Einträge, womit man dem Accordion direkt noch ein assehen geben kann. Zum Beispiel die Größe (width:300px;) oder der Abstand zum Folter (margin-bottom:50px;)
}

.entry {
 width:100%;
 height:50px; hiermit wird die Höhe beschrieben, was bereits zu sehen sein soll bevor sich der Rest öffnet
 border-bottom:1px solid #333; das ist die schwarze Linie unter dem Beitrag
 cursor: pointer;
 overflow: hidden;


text-shadow:1px 1px 0px #fff;

box-shadow:0px 1px 0px #fff;


transition: height 0.7s; ease-out ;
-webkit-transition: height 0.7s; ease-out ;  /*Prefixr.com*/
-moz-transition: height 0.7s;ease-out;
-o-transition: height 0.7s;ease-out;
-ms-transition: height 0.7s;ease-out;

}


.entry:hover {
 height:150px hiermit wird die Weite beschrieben, wieweit das Accordion sich öffnen soll



}
</style>


Ich hoffe es gefällt und klappt bei euch mit dem Tutorial.
Lasst mal ein paar Kommentare da, inwieweit ihr mit meiner Erklärung zurecht gekommen seid.

LG Michi
Someday







18 Kommentare

  1. oh man. das sieht ja klasse aus. :D
    das muss ich ausprobieren. ;)
    süße Grüße. Monika von imBilde

    AntwortenLöschen
  2. wie cool, ich glaube ich bin nicht die einzige die wusste, wie soetwas geht, und gesehen habe ich das auch noch nie zuvor - richtig tolle Sache!! :)

    AntwortenLöschen
  3. Danke Dir für die ganzen Tutorials! Ich schau bei jedem vorbei, weil man manchmal auch so erst merkt, was möglich ist und freue mich, selbst ein wenig meine Fähigkeiten zu verbessern oder was einzubauen! Schön, dass Ihr Euch hier die Mühe damit macht!

    AntwortenLöschen
  4. Oh das sieht genial aus . ich bin fasziniert^^

    AntwortenLöschen
  5. geil :)

    www.fashionkunst,net leser werden :)

    AntwortenLöschen
  6. klasse, gefällt mir.
    werds mal irgendwo einbauen.
    vielen dank dafür

    grüßle, flo

    AntwortenLöschen
  7. Ich finde das toll, aber ich verstehe das nicht so ganz. Welchen Teil soll ich ins HTML einkopieren und welchen in das Widget? Ich hoffe du verstehst was ich meine :) lg Belle

    AntwortenLöschen
    Antworten
    1. Ich habe es einfach ausprobiert. Mir war nicht klar, dass du mit HTML-Schreibfunktion die im Post meintest. Mein Fehler :D lg Belle ich habe es gleich ausprobiert, weil ich schon monatelang nach so etwas gesucht habe.

      Löschen
    2. Kein Ding ;) schön das es gefällt =D

      Löschen
  8. Klasse Tutorial!
    Habs direkt ausprobiert :)

    AntwortenLöschen
  9. Habe es auf dem Blog eingefügt, danke :) Wie kann man den Abstand zwischen Linie und dem darunter liegenden Text vergrößern?

    AntwortenLöschen
    Antworten
    1. hey. Gib mal das

      margin-top:50px; (Zahl kannst du natürlich so ändern wie du es haben willst)

      bei:
      .entry {

      } mit ein. ;)

      Löschen
  10. Ich nutze das Accordion inbrünstig ... Danke nochmal für das Tutorial, ich liebe diese Funktion <3

    AntwortenLöschen
  11. Wie kann man in diese Accordion weitere Gadgets einbauen? Toller Post!

    AntwortenLöschen
    Antworten
    1. Das wäre mal eine gute Idee für ein Tutorial, werden wir uns merken! :)

      Löschen
  12. Was muss man denn weglassen wenn man nur 1 Eintrag haben will ?

    AntwortenLöschen
  13. Okay, ich habe es hingekriegt :D Aber ich habe jetzt Entrys die brauchen 350px beim öffnen damit man alles sieht und manche 150... kann man das irgendwie ändern oder so?

    AntwortenLöschen
  14. erstmal tolle tutorial! konnte es super umsetzen, bis auf eines: das erscheinungsbild des accordions kann ich meiner restlichen navigation einfach nicht anpassen, und ich weiß einfach nicht, wieso es nicht funktioniert
    bitte um hilfe!!!

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!