Beispiel:HTML details-5.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">  
<style>
details > div {
    padding: .5em;
	overflow: hidden;}

details[open] > div {
  animation: sliding 1s forwards; 
}

@keyframes sliding {
  0% {
    height: 0;
  }  

  100% {
    height: 15em;	
  }
}



details {
    grid-column: 2 / 3;
    height: min-content;
    transition: all .5s;
	border: thin solid;
}

summary {
    position: relative;  
    line-height: 300%;
	padding-left: 1em;
    }
    
summary::after {
    content:  " 🡳  "; 
    position: absolute;
    color: green;
    font-size: 2em;
    font-weight: bold; 
    right: 1em;
    top: .2em;
    transition: all 0.5s;
}	

details[open] summary::after {
  color: red;
  transform: scale(1,-1);
}
    
body {
  max-width: 50em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}
	
h1 {
  grid-column: 1 / -1;
}
	
	
  </style>
  <title>details - 5</title> 
</head> 

<body> 
<h1>Akkordion mit einem Schuss Animation</h1>

<p>
  Beim Klicken auf das summary-Element erhält details ein open-Attribut und gibt den Inhalt frei:
</p>

<details> 
   <summary>
        Browser-News:
   </summary>
   <div>
   <p>Das details-Element ist in allen modernen Browsern verfügbar.</p>
   <p>Das Öffnen selbst kann leider nicht mit CSS animiert werden.</p>
   <p>Deshalb wird die Höhe des div-Containers aminiert. Hierbei benötigt man aber einen festen Wert, der bei einer Veränderung des Inhalts angepasst werden muss.</p>
   <p>Solche <strong>magic numbers</strong> sollten nach Möglicheit vermieden werden!</p>
   </div>     
</details> 

</body>
</html>