Diese Webseite verwendet Cookies! Weitere Informationen finden Sie in der Datenschutzerklärung. Datenschutzerklärung.

Accordion 2

Pure CSS Vertikal Accordion 2 Responsive

In diesem Tutorial erfahren Sie, wie Sie ein einfaches, eindrucksvolles Akkordeon mit reinem CSS und HTML erstellen.

Nach dem anklicken oder touch der Accordions Boutons werden Ihre versteckten Inhalte angezeigt.

Sie dürfen den Code verwenden, kopieren und ändern, auch zu kommerziellen Zwecken.
Namensnennung im Code bitte beibehalten.
HTML <!-- Accordion 2 End / by Richard Kircher (c)2019/ www.richukunst.ch -->
CSS /* Accordion 2 Begin / by Richard Kircher (c)2019/ www.richukunst.ch */

Der Einbettcode ist ohne CSS und Html Fehler, W3C-validiertes CSS und HTML. Developer Tools W3C Developers
 

 
free Accordion 2 download

HTML und CSS Datei, HTM Code Accordion 1 bis 5 und.

Neuste Version 02.07.2019.


 
Anleitung Accordion

Ab einer Bildschirmauflösung von 450 Pixel breite wird das + und x Zeichen nicht mehr angezeigt.

Bildschirmauflösung 450 Pixel

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.

 

News

  

Templats Download für
CMSimple_XH  
 
links_icon.png
 
Webseiten Tipp: Fitness-Studio in Steffisburg.
www.silvergym.ch
 

Templates Demo

 

 Besuchen Sie meine
Templates Demo Seite.
 
Templates Demo richu153.jpg
 
 
 
 

Neustes Template

richu183_de

Eine neue kostenlose Vorlage für CMSimple_XH ist verfügbar.

Mit Animated Gradient Background
Free Templates richu183_de

 

Windows Tipp

Neue Rubrik Windows Tipp!

 Erster Tipp, Anleitung, Windows 10, Herunterfahren, Neustart.

ausfuehren.jpg