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