Hallo zusammen,
ich bin die Tage auf eine Anleitung für ein Accordion gestoßen, für das man nur CSS Code braucht. Vielleicht ist jemand auch auf der Suche nach so einer (einfachen) Möglichkeit.
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Accordion ohne JS</title>
</head>
<body>
<div class="list">
<div class="accordion">
<input type="checkbox" id="accordion-1">
<label for="accordion-1">
1. Thema- Lesen -Sie weiter ...
<img src="arrow.svg">
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="accordion">
<input type="checkbox" id="accordion-2">
<label for="accordion-2">
2. Thema- Lesen -Sie weiter ...
<img src="arrow.svg">
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="accordion">
<input type="checkbox" id="accordion-3">
<label for="accordion-3">
3. Thema- Lesen -Sie weiter ...
<img src="arrow.svg">
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</body>
</html>
Alles anzeigen
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap');
body,
html
{
align-items: center;
background-color: lightgoldenrodyellow;
display: flex;
font-family: 'Roboto';
font-size: 10px;
height: 100%;
justify-content: center;
align-items: flex-start;
margin: 5rem 0 0 0;
padding: 0;
width: 100%;
}
*
{
box-sizing: border-box;
}
.list
{
width: 100%;
max-width: 40rem;
}
.accordion
{
width: 100%;
display: flex;
flex-direction: column;
margin: 0 0 2rem 0;
}
input
{
position: absolut;
z-index: -1;
opacity: 0;
}
/* Wenn .accordion = checked, gibt es im DOM auf der Siblingsebene ein Label?
Wenn ja, hat dieses Label ein img? Wenn ja, dann dreh diese img um 180 Grad */
.accordion input:checked ~ label img{
transform: translate(0, -50%) rotate(180deg);
}
/* Wenn .accordion = checked, gibt es im DOM auf der Siblingsebene ein .content?
Wenn ja, dann zeige ihn mit den folgenden Befhelen an */
.accordion input:checked ~ .content{
height: auto;
opacity: 1;
transform: translate(0, 0);
}
label
{
width: 100%;
background-color: skyblue;
font-size: 2rem;
padding: 2rem;
border-radius: 1rem;
cursor: pointer;
transition: all 150ms;
position: relative;
z-index: 2;
}
label:hover
{
transform: scale(1.02);
}
img
{
width: 1.5rem;
position: absolute;
top: 50%;
right: 2rem;
transform: translate(0, -50%);
transition: 350ms all;
}
.content
{
color: #000;
width: 100%;
background-color: rgba(255, 255, 255, 1);
border-radius: 0 0 1rem 1rem;
font-size: 1.6rem;
position: relative;
z-index: 1;
transform: translate(0, -20%);
height: 0;
opacity: 0;
transition: 350ms all;
overflow: hidden;
}
p
{
padding: 2rem;
margin: 0;
}
Alles anzeigen
Die arrow.svg müßt Ihr Euch unter dem folgenden Link downloaden => https://www.flaticon.com/free-icons/arrow
