Accordion Button Überschriften, im HTML Code nach <!-- your headline --> ändern. Pro Webseite können Sie nur ein Accordion Code mit den Identischen Zahlen one bis five verwenden. Pro Webseite können beliebig viele Accordion eingefügt werden. Sollten die fünf Accordion nicht reichen erweitern Sie den Code mit six und seven und so fort. Auf einer neuen Seite können Sie one bis five wiederholt einfügen. Den HTML Code fügen Sie am besten mit dem Editor per Quelltext in Ihre Webseite ein.

<!-- Accordion 2 Begin / by Richard Kircher (c)2019/ www.richukunst.ch -->
<div class="headline_accordion"><input id="click-one" name="click" type="checkbox"> <label for="click-one"><!-- your headline --> Heading One</label>
<div class="accordion_content"><!-- your text begin -->
<p>Lorem 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.</p>
<!-- your text end --></div>
</div>
<p> </p>
<!-- Accordion 2 End / by Richard Kircher (c)2019/ www.richukunst.ch -->

Accordion Button Überschriften, im HTML Code nach <!-- your headline --> ändern. Pro Webseite können Sie nur ein Accordion Code mit den Identischen Zahlen one bis five verwenden. Pro Webseite können beliebig viele Accordion eingefügt werden. Sollten die fünf Accordion nicht reichen erweitern Sie den Code mit six und seven und so fort. Auf einer neuen Seite können Sie one bis five wiederholt einfügen. Den HTML Code fügen Sie am besten mit dem Editor per Quelltext in Ihre Webseite ein.

<!-- Accordion 2 Begin / by Richard Kircher (c)2019/ www.richukunst.ch -->
<div class="headline_accordion"><input id="tab-one" name="tabs" type="checkbox"> <label for="tab-one"><!-- your headline --> Heading One</label>
<div class="accordion_content">
<!-- your text begin -->
<p>Lorem 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.</p>
<!-- your text end -->
</div>
</div>
<div class="headline_accordion"><input id="tab-two" name="tabs" type="checkbox"> <label for="tab-two"><!-- your headline --> Heading Two</label>
<div class="accordion_content">
<!-- your text begin -->
<p>Lorem 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.</p>
<!-- your text end -->
</div>
</div>
<div class="headline_accordion"><input id="tab-three" name="tabs" type="checkbox"> <label for="tab-three"><!-- your headline --> Heading Three</label>
<div class="accordion_content">
<!-- your text begin -->
<p>Lorem 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.</p>
<!-- your text end -->
</div>
</div>
<div class="headline_accordion"><input id="tab-four" name="tabs" type="checkbox"> <label for="tab-four"><!-- your headline --> Heading Four</label>
<div class="accordion_content">
<!-- your text begin -->
<p>Lorem 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.</p>
<!-- your text end -->
</div>
</div>
<div class="headline_accordion"><input id="tab-five" name="tabs" type="checkbox"> <label for="tab-five"><!-- your headline --> Heading Five</label>
<div class="accordion_content">
<!-- your text begin -->
<p>Lorem 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.</p>
<!-- your text end -->
</div>
</div>
<p> </p>
<!-- Accordion 2 End / by Richard Kircher (c)2019/ www.richukunst.ch -->

Im CSS Code zweimal vor /* enter your font family */ geben Sie Ihre Schriftfamilie ein. Die Hintergrund Farbe und die Text Farbe der Accordions Boutons ändern Sie im CSS Code.

/* Accordion 2 Begin / by Richard Kircher (c)2019/ www.richukunst.ch */
/* Accordion Buttons Text */
.headline_accordion {
position: relative;
margin-bottom: 10px;
width: 100%;
font-family: "Quantico", sans-serif;/* enter your font family */
font-size: 1.3em;
font-weight: 600;
text-align: center;
color: #FF0;
overflow: hidden;
box-shadow: -6px 6px 5px 1px rgba(0,0,0,0.4);
}
.headline_accordion input {
position: absolute;
opacity: 0;
z-index: -1;
}
/* Accordion Buttons, Background, Color */
.headline_accordion label {
position: relative;
display: block;
background: #00F;
line-height: 3.5;
cursor: pointer;
box-shadow: -6px 6px 5px 1px rgba(0,0,0,0.3);
}
.headline_accordion label:hover {
transition-duration: 1s;
transition-timing-function: ease-out;
background-color: #600;
}
/* Accordion Content Text */
.accordion_content {
max-height:0;
overflow-x: auto;
background: #FFF;
transition: max-height 2s;
line-height: 1.5;
font-size: 16px;
font-weight:400;
font-family: 'Roboto', sans-serif;/* enter your font family */
color: #444444;
word-wrap: break-word;
text-align: left;
padding-left: 25px;
padding-right: 25px;
}
.accordion_content p {
margin: 1em;
padding-top: 0;
}
/* + x */
.headline_accordion input:checked ~ .accordion_content {
max-height: 100vh;
}
/* + x */
.headline_accordion label::after {
position: absolute;
right: 0;
top: 0;
display: block;
padding-right: 25px;
margin-top: -35px;
transition: all 1s;
}
.headline_accordion input[type=checkbox] + label::after {
content: "+";
font-size: 2em;
font-weight: 900;
}
.headline_accordion input[type=radio] + label::after {
content: "\25BC";
}
.headline_accordion input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}
.headline_accordion input[type=radio]:checked + label::after {
transform: rotateX(180deg);
}
/* -------------------- Media Queries Accordion 2 Begin -------------------- */
@media screen and (max-width: 600px){
.headline_accordion {
font-size: 0.9em;
font-weight: 400;
}
}
@media screen and (max-width: 450px){
.headline_accordion input[type=checkbox] + label::after {
content: "+";
display: none;
}
}
/* -------------------- Media Queries Accordion 2 End -------------------- */
/* Accordion 2 End / by Richard Kircher (c)2019/ www.richukunst.ch */

Auch Videos können im Accordion eingefügt werden. Eine detaillierte Anleitung wie Sie die YouTube Videos responsive in den Templates verwenden finden Sie hier.

<!-- YouTube Video 100% responsive on page Start / by Richard Kircher (c)2018/ www.richukunst.ch -->
<p></p>
<div class="youtube-container-100"><iframe src="https://www.youtube.com/embed/nnEuvgtkeCA?rel=0" allowfullscreen="allowfullscreen"></iframe></div>
<p></p>
<!-- YouTube Video 100% responsive on page End / by Richard Kircher (c)2018/ www.richukunst.ch -->

Erstellen Sie in Ihrem CMS eine neue Seite und erstellen den Seiten Inhalt mit Text, Videos und Bildern wie Sie möchten. 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.