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>