Deine Info-Box


→ Heute kann jeder ganz einfach eine eigene Website selber erstellen – auch ohne Programmierkenntnisse oder Designwissen. Mit dem intuitiven Baukasten-Systems von Jimdo wählst du ein Design und gestaltest dann mit optimal designten Layout-Blöcken deine Website. Zudem stehen dir eine riesige Bilder-Bibliothek und viele Design-Funktionen zur Verfügung. Übrigens: Bereits vorhandene Fotos und Informationen von sozialen Netzwerken kannst du direkt übernehmen.

Füge den folgenden HTML-Code in ein Widget/HTML-Element auf deiner Creator-Seite ein:

<button class="collapsible">Wie leicht ist es, meine Homepage selber zu machen?</button>

<div class="content">

    <p>

        → Heute kann jeder ganz einfach eine eigene Website selber erstellen – auch ohne Programmierkenntnisse oder Designwissen. Mit dem intuitiven Baukasten-Systems von Jimdo wählst du ein Design

        und gestaltest dann mit optimal designten Layout-Blöcken deine Website. Zudem stehen dir eine riesige Bilder-Bibliothek und viele Design-Funktionen zur Verfügung. Übrigens: Bereits vorhandene

        Fotos und Informationen von sozialen Netzwerken kannst du direkt übernehmen.

    </p>

</div>

<script>

/* <![CDATA[ */

var coll = document.getElementsByClassName("collapsible");

var i;

 

for (i = 0; i < coll.length; i++) {

  coll[i].addEventListener("click", function() {

    this.classList.toggle("active");

    var content = this.nextElementSibling;

    if (content.style.maxHeight){

      content.style.maxHeight = null;

    } else {

      content.style.maxHeight = content.scrollHeight + "px";

    } 

  });

}

/*]]>*/

</script>

Und diesen Teil einfach in den Headbereich deiner Seite:

<style>

/* <![CDATA[ */

.collapsible {

  background-color: #deded7;

  color: black;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

}

 

.active, .collapsible:hover {

  background-color: #555;

  color: white;

}

 

.collapsible:after {

  content: '\002B';

  color: white;

  font-weight: bold;

  float: right;

  margin-left: 5px;

}

 

 

.active:after {

  content: "\2212";

}

 

.content {

  padding: 0 18px;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

  background-color: #f1f1f1;

}

/*]]>*/

</style>