Accordions

Pure CSS Vertikal Accordions Responsive
Nach dem anklicken oder touch der Accordions Boutons werden Ihre versteckten Inhalte angezeigt.
 
Sie dürfen den Code verwenden, kopieren und ändern, auch zu kommerziellen Zwecken.
Namensnennung im Code bitte beibehalten.
/* Accordion Begin / by Richard Kircher (c)2018/ www.richukunst.ch */
<!-- Accordion Begin / by Richard Kircher (c)2018/ www.richukunst.ch -->
 
Der Einbettcode ist ohne CSS und Html Fehler, W3C-validiertes CSS und HTML. Developer Tools W3C Developers
 
free Accordions download

CSS und HTM Datei, Code 1 bis 10 und 11 bis 20.

 
Fügen Sie den untenstehenden CSS Code in Ihre Stylesheet Datei Ihres Template ein.
 

/* Accordion Begin / by Richard Kircher (c)2018/ www.richukunst.ch */
/* Accordion Buttons, Farbe, background, font, Begin */
.ac_1, .ac_1 ~ .content span {
cursor: pointer;
background-color: #00F;/* Hintergrunds Farbe */
text-align: center;
font-size: 16px;
font-weight: 600;
color: #FFF;/* Text Farbe */
}
.ac_2, .ac_2 ~ .content span {
cursor: pointer;
background-color: #F00;/* Hintergrunds Farbe */
text-align: center;
font-size: 16px;
font-weight: 600;
color: #FFF;/* Text Farbe */
}
.ac_3, .ac_3 ~ .content span {
cursor: pointer;
background-color: #F63;/* Hintergrunds Farbe */
text-align: center;
font-size: 16px;
font-weight: 600;
color: #FFF;/* Text Farbe */
}
.ac_4, .ac_4 ~ .content span {
cursor: pointer;
background-color: #060;/* Hintergrunds Farbe */
text-align: center;
font-size: 16px;
font-weight: 600;
color: #FFF;/* Text Farbe */
}
.ac_5, .ac_5 ~ .content span {
cursor: pointer;
background-color: #F09;/* Hintergrunds Farbe */
text-align: center;
font-size: 16px;
font-weight: 600;
color: #FFF;/* Text Farbe */
}
.ac_6, .ac_6 ~ .content span {
cursor: pointer;
background-color: #000;/* Hintergrunds Farbe */
text-align: center;
font-size: 16px;
font-weight: 600;
color: #FFF;/* Text Farbe */
}
.ac_7, .ac_7 ~ .content span {
cursor: pointer;
background-color: #FF0;/* Hintergrunds Farbe */
text-align: center;
font-size: 16px;
font-weight: 600;
color: #00F;/* Text Farbe */
}
.ac_8, .ac_8 ~ .content span {
cursor: pointer;
background-color: #EEE;/* Hintergrunds Farbe */
text-align: center;
font-size: 16px;
font-weight: 600;
color: #00F;/* Text Farbe */
}
.ac_9, .ac_9 ~ .content span {
cursor: pointer;
background-color: #DDD;/* Hintergrunds Farbe */
text-align: center;
font-size: 16px;
font-weight: 600;
color: #00F;/* Text Farbe */
}
.ac_10, .ac_10 ~ .content span {
cursor: pointer;
background-color: #EEE;/* Hintergrunds Farbe */
text-align: center;
font-size: 16px;
font-weight: 600;
color: #00F;/* Text Farbe */
}
/* Accordion Buttons, Farbe, background, font, End*/
/* Accordion Buttons, Farbe, background, font, hover , Begin */
.ac_1:hover, .ac_2:hover, .ac_3:hover, .ac_4:hover, .ac_5:hover, .ac_6:hover, .ac_7:hover, .ac_8:hover, .ac_9:hover, .ac_10:hover {
transition-duration: 1s;
transition-timing-function: ease-out;
background-color: #0FF;
color: #000;
font-size: 14px;
font-weight: 600;
}
/* ▼ */
.ac_1::before, .ac_2::before, .ac_3::before, .ac_4::before, .ac_5::before, .ac_6::before, .ac_7::before, .ac_8::before, .ac_9::before, .ac_10::before {
display: block;
position: absolute;
color: #FFF;
content: "\25BC";
font-size: 26px;
font-weight: 900;
right: 10px;
top: -10px;
}
/* Accordion Inhaltsseite */
.accordion_box {
background-color: #FFF;
width: 100%;
height: auto;
margin-top: 20px;
margin-bottom:20px;
box-shadow: 2px 2px 5px 2px #000;
}
/* Accordion Buttons Texthöhe zum anklicken */
.accordion_box .accordion label, .accordion_box .accordion label i {
position:relative;
display:block;
padding:0 40px 0 0;
height: 50px;
line-height: 2.5;
}
/* Abstand zwischen Accordion Buttons und ecke mit Hacken */
.accordion_box .accordion input {
display:none;
}
/* Inhalt Accordion */
.accordion_box .content {
height: auto;
overflow-x: hidden;
position:relative;
height:0;
font-size:16px;
font-weight:400;
color: #444444;
}
/* span class=img sonst unter dem Bild Farbiger Balken */
.accordion_box .content img {
display: block;
margin: 0;
padding: 0;
}
.accordion_box .content span.code {
background-color: #CFF;
line-height: 1.5;
display: block;
font-size: 14px;
font-family: Consolas, monospace;
font-weight:400;
color: #888888;
padding: 5px 5px;
letter-spacing: .05em;
word-wrap: break-word;
text-align: left;
}
/* Abstand in der Inhaltsseite */
.accordion_box input[type="checkbox"]:checked ~ div.content {
height:auto;
padding:25px;
}
/* -------------------- Media Queries Accordion Begin -------------------- */
@media screen and (max-width: 440px){
.ac_1, .ac_1, .ac_2, .ac_2, .ac_3, .ac_3, .ac_4, .ac_4, .ac_5, .ac_5, .ac_6, .ac_6, .ac_7, .ac_7, .ac_8, .ac_8, .ac_9, .ac_9, .ac_10, .ac_10 ~ .content span {
text-align: center;
font-size: 12px;
font-weight: 400;
}
}
/* -------------------- Media Queries Accordion End -------------------- */
/* Accordion End / by Richard Kircher (c)2018/ www.richukunst.ch */

Der HTML Code wird in Ihre Webseite eingefügt. Anleitung und Beispiele in Einfügen in Webseite beschrieben.

 

<!-- Accordion Begin / by Richard Kircher (c)2018/ www.richukunst.ch -->
<div class="accordion_box">
<div class="accordion"><label class="ac_1" for="acc_1"><!-- your headline --> YOUR ACCORDION 1 </label> <input id="acc_1" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_2" for="acc_2"><!-- your headline --> YOUR ACCORDION 2 </label> <input id="acc_2" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_3" for="acc_3"><!-- your headline --> YOUR ACCORDION 3 </label> <input id="acc_3" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_4" for="acc_4"><!-- your headline --> YOUR ACCORDION 4 </label> <input id="acc_4" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_5" for="acc_5"><!-- your headline --> YOUR ACCORDION 5 </label> <input id="acc_5" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_6" for="acc_6"><!-- your headline --> YOUR ACCORDION 6 </label> <input id="acc_6" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_7" for="acc_7"><!-- your headline --> YOUR ACCORDION 7 </label> <input id="acc_7" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_8" for="acc_8"><!-- your headline --> YOUR ACCORDION 8 </label> <input id="acc_8" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_9" for="acc_9"><!-- your headline --> YOUR ACCORDION 9 </label> <input id="acc_9" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_10" for="acc_10"><!-- your headline --> YOUR ACCORDION 10 </label> <input id="acc_10" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
</div>
<p> </p>
<!-- Accordion End / by Richard Kircher (c)2018/ www.richukunst.ch -->

Überschriften und Text ändern
<!-- Accordion Begin / by Richard Kircher (c)2018/ www.richukunst.ch -->
<div class="accordion_box">
<div class="accordion"><label class="ac_1" for="acc_1"><!-- your headline --> YOUR ACCORDION 1 </label> <input id="acc_1" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span> <!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<!-- Accordion End / by Richard Kircher (c)2018/ www.richukunst.ch --></div>
<p> </p>
 

Überschriften!
Im HTML Code nach <!-- your headline --> löschen Sie YOUR ACCORDION 1 und fügen Ihren Überschrift Namen ein.

Text!
Im HTML Code zwischen <!-- your text begin --> und <!-- your text end --> fügen Sie Ihren Text ein.

Tipp!
Erstellen Sie in Ihrem CMS eine neue Seite und erstellen den Seiten Inhalt mit Text, Videos und Bildern wie Sie möchten. (Seite wieder löschen) Klicken Sie nun im Editor auf <>, Quelltext oder HTML und markieren alles, kopieren Sie nun den Inhalt und fügen alles zwischen <!-- your text begin --> und <!-- your text end --> ein.

 

 

Hintergrund Farbe und Überschrift Farbe ändern

Hintergrund und Überschrift Farbe ändern Sie im CSS Code.

.ac_1, .ac_1 ~ .content span {
cursor: pointer;
background-color: #00F;/* Hintergrunds Farbe */
text-align: center;
font-size: 16px;
font-weight: 600;
color: #FFF;/* Text Farbe */
}
 
Die Hintergrund Farbe und die Text Farbe der Accordions Boutons ändern Sie im CSS Code. Jeder der 10 Accordions Boutons können Sie die Farbe individuell anpassen. Die Accordions Boutons .ac_1 bis .ac_10 kann die Hintergrunds Farbe und die Text Farbe geändert werden.

 

Accordions in Ihre Webseite einfügen

Pro Webseite können Sie nur ein Accordions Bouton Code mit den Identischen Zahlen verwenden. (1 bis 10) Wenn Sie mehr als 10 Accordions Bouton auf einer Webseite verwenden möchten benutzen Sie Accordions Bouton 11 bis 20, im Download Ordner ist eine CSS und HTML Datei beigefügt. In Ihrer Installation auf unterschiedlichen Webseiten können Sie denselben Code (1 bis 10) mehrmals verwenden.

So fügen Sie ein Accordion mit dem HTML Code in Ihre Webseite ein. (unterer Code mit blauem Hintergrund ) Mit dem Editor auf <> Quelltext oder HTML klicken und den kopierten Code einfügen und speichern. Code für ein Accordion Bouton mit Absatz zwischen den Accordions Boutons. <p>Hier beginnt ein Absatz, und hier ist er zu Ende.</p> Bei einem oder bei mehreren Accordions Boutons zuletzt <p></p> einfügen sonst kann nach den Accordions Boutons nicht mehr ganz links am Seitenrand geschrieben werden. Bei mehreren um den zwischen Raum zu verkleinern ohne <p></p>. Farbliche Anpassungen ändern Sie in CSS Code, Anleitung in Farbe anpassen im CSS Code.

<!-- Accordion Begin / by Richard Kircher (c)2018/ www.richukunst.ch -->
<div class="accordion_box">
<div class="accordion"><label class="ac_1" for="acc_1"><!-- your headline --> YOUR ACCORDION 1 </label> <input id="acc_1" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span> <!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<!-- Accordion End / by Richard Kircher (c)2018/ www.richukunst.ch --></div>
<p> </p>
 
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Mehrere Accordions Bouton mit Absatz. Der untere Code ist erweitert mit class="ac_2, for="acc_2, input id="acc_2. Weiter Accordions Bouton erweitern Sie mit 3 und fortfahrend. Farbliche Anpassungen ändern Sie in CSS Code, Anleitung in Farbe anpassen im CSS Code.

<!-- Accordion Begin / by Richard Kircher (c)2018/ www.richukunst.ch -->
<div class="accordion_box">
<div class="accordion"><label class="ac_2" for="acc_2"><!-- your headline --> YOUR ACCORDION 2 </label> <input id="acc_2" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span> <!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<!-- Accordion End / by Richard Kircher (c)2018/ www.richukunst.ch --></div>
<p> </p>

ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Mehrere oder alle 10 Accordions Bouton ohne Absatz fügen Sie mit dem kompletten HTML Code ein. Farbliche Anpassungen ändern Sie in CSS Code, Anleitung in Farbe anpassen im CSS Code. Hier beginnt ein Absatz, und hier ist er zu Ende.</p>. Bei mehreren Accordions Boutons zuletzt <p></p> einfügen sonst kann nach den Accordions Boutons nicht mehr ganz links am Seitenrand geschrieben werden.

Sie können auch in ein Accordion mehrere Accordions einfügen. (Siehe Beispiel)

ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

 

ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Siehe Beispiel Code

<!-- Accordion Begin / by Richard Kircher (c)2018/ www.richukunst.ch -->
<div class="accordion_box">
<div class="accordion"><label class="ac_3" for="acc_3"><!-- your headline --> YOUR ACCORDION 3 </label> <input id="acc_3" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.<p> </p> <div class="accordion"><label class="ac_4" for="acc_4"><!-- your headline --> YOUR ACCORDION 4 </label> <input id="acc_4" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_5" for="acc_5"><!-- your headline --> YOUR ACCORDION 5 </label> <input id="acc_5" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_6" for="acc_6"><!-- your headline --> YOUR ACCORDION 6 </label> <input id="acc_6" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_7" for="acc_7"><!-- your headline --> YOUR ACCORDION 7 </label> <input id="acc_7" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_8" for="acc_8"><!-- your headline --> YOUR ACCORDION 8 </label> <input id="acc_8" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_9" for="acc_9"><!-- your headline --> YOUR ACCORDION 9 </label> <input id="acc_9" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div>
<div class="accordion"><label class="ac_10" for="acc_10"><!-- your headline --> YOUR ACCORDION 10 </label> <input id="acc_10" name="your_tabs" type="checkbox">
<div class="content"><span class="accordion_content"></span>
<!-- your text begin --> ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. <!-- your text end --></div>
</div><!-- your text end --></div>
</div>
</div>
<p> </p>
<!-- Accordion End / by Richard Kircher (c)2018/ www.richukunst.ch -->

ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

 

News

  

Templats Download für
CMSimple_XH  
 
links_icon.png
 
Webseiten Tipp: Fitness-Studio in Steffisburg.
www.silvergym.ch
 
Ich bin vom 26.10.18 bis 25.11.18 in den Ferien!

Templates Demo

 

 Besuchen Sie meine
Templates Demo Seite.
 
Templates Demo richu153.jpg
 
 
 
 

Neustes Template

richu183_de

Eine neue kostenlose Vorlage für CMSimple_XH ist verfügbar.

Mit Animated Gradient Background
Free Templates richu183_de

 

Windows Tipp

Neue Rubrik Windows Tipp!

 Erster Tipp, Anleitung, Windows 10, Herunterfahren, Neustart.

ausfuehren.jpg