Accordion-Menü im Content

Dies ist eine schnelle und für mich und mein Layout noch recht einfach anzupassende Möglichkeit, die Seitenlänge etwas einzukürzen.

Da ich dieses Element nicht Standard-mäßig auf jeder Seite sondern nur wenige Male verwende, wollte ich meinen Head nicht damit zumüllen.

Bei den Bezahlversionen von Jimdo kann man den Head ja auch für einzelne Unterseiten gestalten. Da ich mir jedoch noch nicht endgültig sicher war, wie meine 2. Homepage heißen sollte (Ich war von Genehmigungen abhängig.), arbeitete ich erst mal mit der Free-Version. Bei der Free-Version kann ich den Head nur für alle Seiten gleich gestalten.

Also entschied ich mich dafür, alle erforderlichen Informationen in das obige Widget-Feld zu quetschen:

<div class="accordion1">

<section>

<input type="checkbox" id="c1" name="cb1" value="" />

<label for="c1" class="open"> Wenn du ein klein wenig mehr erfahren möchtest, dann klicke hier.</label>

<label for="c1" class="close">Zum Schließen, einfach erneut klicken.</label>

<div>

<br />

<p style="text-align: justify;">

Mit dieser Möglichkeit konnte ich auf mehreren Seiten etwas Text "verstecken", so dass der Content erst mal nicht so erschlagend wirkt.

</p>

<p style="text-align: justify;">

</p>

<p style="text-align: justify;">

Dies habe ich dann eingesetzt, wenn ich ergänzende Informationen geben wollte, die aber für die eigentliche Seitenaussagen nicht primär sondern nur erläuternd wichtig waren.

</p>

<p style="text-align: justify;">

</p>

<p style="text-align: justify;">

Bisher hatte ich für solche erklärenden Zusatzinfos eine weitere Unterebene benötigt, wenn der Seiteninhalt nicht zu lang werden sollte.

</p>

<p style="text-align: justify;">

</p>

<p style="text-align: justify;">

Durch hinzufügen weiterer Accordions kann man auch problemlos verschiedene Infos verstecken.

</p>

<p style="text-align: justify;">

</p>

<p style="text-align: justify;">

Jetzt schreibe ich nur noch ein bisschen Text, damit du siehst, was passiert, wenn die Box "voll" ist. Dafür muss mir ja nicht mehr unbedingt etwas Sinnvolles einfallen. Dafür würde sich perfekt der Lore-ipsum-Text anbieten. Aber ich habe keine Lust den jetzt irgendwo zu kopieren. Und so funktioniert es ja auch. :-)

</p>

<p style="text-align: justify;">

</p>

<p style="text-align: justify;">

Mit intuitivem Scrollen kommt man zu zu

</p>

<p style="text-align: justify;">

</p>

<p style="text-align: center; font-family: verdana; font-size: 30px; font-weight: bold; color: red; font-style: italic;">

The End!

</p>

<br />

</div>

</section>

</div>

<style>

/* <![CDATA[ */

.accordion1 {

    width: auto;

    height: auto;

    Margin: 0em;

    Margin-top:3px;

    Margin-bottom:0px;    

}

.accordion1 [type=radio],

.accordion1 [type=checkbox] {

    display: none;

}

.accordion1 label {

    color: ;

    font-weight: ;

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

    border: 1px solid #fff;

    border-bottom: 0;

    border-radius: 3px 3px 3px 3px;

    display: block;

    text-align: center;

    margin: 3px 0 0;

    padding: 3px;

    background: linear-gradient(#eedfcc,#cdc0b0);

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

    transition: all 1s ease-in;

}

.accordion1 label:hover {

    background: linear-gradient(#cdc0b0,#eedfcc);

    color: ;

}

.accordion1 [type=radio]:checked ~ label,

.accordion1 [type=checkbox]:checked ~ label {

    background: linear-gradient(#eedfcc,#cdc0b0);

    color: ;

    text-shadow: 0px 0px 0 #555;

}

/* Steuerung der Sichtbarkeit der labels */

.accordion1 input:not(:checked) ~ .close,

.accordion1 input:checked ~ .open {

    display: none;

}

.accordion1 label:before {    /*Zeichen vor dem Text einfügen*/

    content: '';

    padding: 0 12px 0 5px;

}

.accordion1 label:after {         /*Zeichen nach dem Text einfügen*/

    content: '';

    padding: 0 12px 0 5px;

}

.accordion1 [type=radio]:checked ~ label:before,             /*Zeichen vor dem Text einfügen*/

.accordion1 [type=checkbox]:checked ~ label:before {

    content: '';

    padding: 0 14px 0 7px;

}

.accordion1 [type=radio]:checked ~ label:after,

.accordion1 [type=checkbox]:checked ~ label:after {          /*Zeichen nach dem Text einfügen*/

    content: '';

    padding: 0 14px 0 7px;

}

.accordion1 [type=radio]:checked ~ label + div,

.accordion1 [type=checkbox]:checked ~ label + div {

    overflow: auto;

    height: 19em;

    border-radius: 0 0 5px 5px;

}

.accordion1 div {

    height: 0;

    padding: 0 10px;

    overflow: hidden;

    background: #8B795E ;

    border: 1px solid #8b8378;

    transition: all 1s ease-in;

}

.accordion1 p {

    color: #FAEBD7;;

        text-align:justify;

}

.accordion1 h3 {

    color: ;

    font-weight: ;

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

    padding: 5px 10px;

/*]]>*/

</style>