CSS3 animation to create an accordion panel - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Accordion

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Accordion

Description

CSS3 animation to create an accordion panel

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.accordeon-checkbox {<!--from   w w w.j  a  va 2  s .c o m-->
   display: none;
}
.accordeon-title-label {
   cursor: pointer;
   background: #c4c4c4;
   display: block;
}
.accordeon-content {
   height: 0;
   overflow:hidden;
   background-color: gold;
}
.accordeon:checked + label {
   background: #e4e4e4;
}
.accordeon-checkbox:checked ~ .accordeon-content {
   -webkit-animation: slide-up 1s ease forwards;
   -moz-animation: slide-up 1s ease forwards;
   -o-animation: slide-up 1s ease forwards;
   animation: slide-up 1s ease forwards;
}
@-webkit-keyframes slide-up {
   0% {
      height: 0;
   }
   100% {
      height: 300px;
   }
}
@-moz-keyframes slide-up {
   0% {
      height: 0;
   }
   100% {
      height: 300px;
   }
}
@-o-keyframes slide-up {
   0% {
      height: 0;
   }
   100% {
      height: 300px;
   }
}
@keyframes slide-up {
   0% {
      height: 0;
   }
   100% {
      height: 300px;
   }
}


      </style> 
 </head> 
 <body> 
  <div class="accordeon"> 
   <input type="checkbox" name="accordeon-title" class="accordeon-checkbox" id="accordeon-title"> 
   <label for="accordeon-title" class="accordeon-title-label">Accordeon title</label> 
   <div class="accordeon-content"> 
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet.</p> 
    <p>At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials