Accordion

Ein einfaches Accordion ohne Javascript nur mit css.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

/* Den unten stehenden Text/Script in eine Contentseite oder bei einem Artikel in die Beschreibung einfügen. Text einfach kopieren und einsetzen. */ /* Stellt dabei bitte den Editor auf Quellcode, damit keine Leerzeichen oder Zeilenumbrüche eingetragen werden */

<div class="accordion">
    <h1>Headline</h1>

    <div class="half">
        <p>
            Textblock für zusätzlichen Mengentext unter der Headline
        </p>

        <hr />
        <div class="tab">
            <input id="tab-one" name="tabs" type="checkbox" /> <label for="tab-one">Label One</label>

            <div class="tab-content">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                    <p>
                        <img alt="" src="https://www.secuware24.de/images/Neue_Bilder/callback.jpg" />
                    </p>
                </div>

                <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
                    </p>

                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
                    </p>
                </div>

                <div class="col-xs-12">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
                    </p>
                </div>
            </div>
        </div>

        <div class="tab">
            <input id="tab-two" name="tabs" type="checkbox" /> <label for="tab-two">Label Two</label>

            <div class="tab-content">
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
                    </p>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
                    </p>
                </div>

                <div class="col-xs-12">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
                    </p>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
                    </p>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
                    </p>
                </div>
            </div>
        </div>

        <div class="tab">
            <input id="tab-three" name="tabs" type="checkbox" /> <label for="tab-three">Label Three</label>

            <div class="tab-content">
                <div class="col-xs-12">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
                    </p>
                </div>

                <div class="col-xs-12">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
                    </p>
                </div>

                <div class="col-xs-12">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
                    </p>
                </div>
            </div>
        </div>

        <div class="tab">
            <input id="tab-four" name="tabs" type="checkbox" /> <label for="tab-four">Content-Text</label>

            <div class="tab-content">
                <div class="col-xs-12">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
                    </p>
                </div>
            </div>
        </div>

        <hr />
    </div>
</div>

 

@charset "UTF-8";
/* CSS Document */

.accordion h1 {
   text-align: left;
}

.accordion .half {
   width: 100%;
   padding: 0em;
}


/* Acordeon styles */
.accordion .tab {
   position: relative;
   margin-bottom: 5px;
   width: 100%;
   overflow: hidden;
}

.accordion input {
   position: absolute;
   opacity: 0;
   z-index: -1;
}

.accordion label {
   position: relative;
   display: block;
   padding: 0 0 0 1em;
   font-weight: bold;
   font-size: 1.5rem;
   line-height: 3;
   cursor: pointer;
   background-color: #4578B6;   /* Die Farbe vom geschlossenen Tab-Reiter (#457886 = blau)  */
   color: #fff;    /* Die Farbe der Schrift im geschlossenen Tab-Reiter (#fff = weiss)  */
}

.accordion .tab-content {
   max-height: 0;
   overflow: hidden;
   -webkit-transition: max-height .35s;
   -o-transition: max-height .35s;
   transition: max-height .35s;
   background-color: #efefef;    /*  Die Hintergrundfarbe vom Tab-Inhalt (#efefef = grau)  */
    color: #000;     /*  Die Textfarbe im Tab-Inhalt (#000 = schwarz)  */
}

.accordion .tab-content > div {
   padding: 1em;
   display: block;
}

.accordion .tab-content > div > p {
    padding: 0 !important;
}

/* :checked */
   .accordion input:checked ~ label {
    background-color: #ED9C1A;    /* Die Farbe vom offenen Tab-Reiter  (#ED9C1A = orange)  */
    color: #000;     /* Die Farbe der Schrift im offenen Tab-Reiter (#000 = schwarz)  */
}

.accordion input:checked ~ .tab-content {
   height: auto;
   max-height: 100%;
}

/* Icon */
.accordion label::after {
   position: absolute;
   right: 0;
   top: 0;
   display: block;
   width: 3em;
   height: 3em;
   line-height: 3;
   text-align: center;
   -webkit-transition: all .35s;
   -o-transition: all .35s;
   transition: all .35s;
}

.accordion input[type=checkbox] + label::after {
   content: "+";
   font-size: 2.5rem;
   margin-top: -1.6rem;
   color: #f8eb35;    /* Die Farbe des Icon im Tab-Reiter (#f8eb35 = gelb)  */
}

.accordion input[type=checkbox]:checked + label::after {
   transform: rotate(315deg); 
}



Den Text im Reiter "Content-Text" könnt ihr kopieren und in einen Content einsetzen. 
Stellt dabei bitte den Editor auf Quellcode und fügt den kopierten Text ein, dabei wird verhindert dass unnötige Leerzeichen oder Zeilenumbrüche in den Content eingesetzt werden. 
Ich habe die Datei in GXModules abgelegt, weil da immer die Anpassungen oder die Erweiterungen rein kommen. 
Wenn ihr einen anderen Ort wählt, dann müsst ihr den Pfad zum Script anpassen.

Hier die CSS-Dateien zum download.
Ihr könnt auch den css-Code kopieren und im SE ins eigene css reinkopieren.
Oder den Ordner per FTP auf eueren Server in den Ordner GXModules laden.

accordion.zip

HTML-Textdatei für den Content-Text