Tất cả bài viết | CSS3

Tạo accordion panel bằng CSS3

Hướng dẫn tạo accordion panel bằng CSS3

Phần định nghĩa CSS

 
h1 {font-size:20px; margin:0px;}	     
.accordion {
      width: auto;
   }
    
.accordion > label {
      display: block;    
}
    
.accordion > input {
      display: none;    
}
    
.accordion > div {
      height: 0;
      overflow: hidden;
}
    
.accordion > input:checked + label + div {
       height: auto;    
}
    
.accordion > div > * {
      margin: 10px;    
}
    
.accordion > input:checked + label {
      background-color: green;    
}
    
.accordion > label {
      font-family:Arial, Helvetica, sans-serif;
      background-color:#F90;
      border: 1px solid #CCC;
      color: white;
      cursor: pointer;
      font-weight: bold;
      padding: 4px 10px;
      text-transform: uppercase;
}
    
.accordion > div {
      margin-bottom: 1px;
      border-bottom: 1px solid gray;
      border-left: 1px solid gray;
      border-right: 1px solid gray;
      -webkit-transition: all linear 500ms;
      -moz-transition: all linear 500ms;
      -o-transition: all linear 500ms;
      transition: all linear 500ms;
    }

Phần định nghĩa HTML

 
   Khóa học Chuyên viên website lành nghề online 
   
   Nội dung khóa học bao gồm:  
    
    Dreamweaver CS3/CS4/CC 
    Flash CS6 
    Fireworks CS6 
    Swishmax 4 
    HTML5 
    CSS3 
    Responsive web Design (RWD) 
    Bootstrap 
    JQUERY 
    Javascript 
    PHP 
    MySQL 
    AJAX 
    Các công cụ thiết kế web chuyên dụng..... 
    
  
 Khóa học Thiết kê giao diện website online  
   
   Nội dung khóa học bao gồm:  
    
    Dreamweaver CS3/CS4/CC 
    Flash CS6 
    Fireworks CS6 
    Swishmax 4 
    HTML5 
    CSS3 
    Responsive web Design (RWD) 
    Bootstrap 
    JQUERY 
    Javascript 
    
  
 Khóa học Lập trình PHP cơ bản online  
   
   Giới thiệu  
    
    PHP và MySQL là hai công nghệ mã nguồn mở được dùng để phát triển ứng dụng Web rất mạnh và phổ biến hiện nay. 
    PHP là ngôn ngữ lập trình ứng dụng Web thực thi mã trên Server (Server-side) có khả năng kết nối cơ sở dữ liệu trực tiếp đến MySQL. 
    MySQL là hệ quản trị CSDL mã nguồn mở được ứng dụng hầu hết cho việc phát triển ứng dụng Web của các doanh nghiệp hiện nay. 
    
  
  Khóa học Lập trình HTML5,CSS3,RWD.JS Online  
   
   Nội dung khóa học bao gồm:  
    
    Dreamweaver CS3/CS4/CC 
    HTML5 
    CSS3 
    Responsive web Design (RWD) 
    Bootstrap 
    Javascript 
    JQUERY