Đàn accordion trong css

Thẻ.

• Accordion
• Cách tạo đàn accordion
• Tạo đàn accordion
• Bootstrap
• RWD
• Lập trình Bootstrap

Bootstrap    Xem [4190]   Học thiết kế web

Bước 1. Tạo cấu trúc HTML

 
 
a:hover,a:focus{    
text-decoration: none;    
outline: none;
}

#accordion .panel{    
border: none;    
box-shadow: none;    
border-radius: 0;    
text-align: right;
}

#accordion .panel-heading{    
padding: 0;    
border: none;
}

#accordion .panel-title a{    
display: block;    
padding: 10px 50px 10px 20px;    
background: #fff;    
font-size: 16px;    
font-weight: 600;    
color: #c52d37;    
position: relative;    
transition: all 0.3s ease 0s;
}

#accordion .panel-title a:after,
#accordion .panel-title a.collapsed:after{    
content: "\f068";    
font-family: fontawesome;    
width: 30px;    
height: 30px;    
line-height: 30px;    
border-radius: 50%;    
text-align: center;    
border: 1px solid #c52d37;    
font-size: 15px;    
font-weight: normal;    
color: #c52d37;    
position: absolute;    
top: 2px;    
right: 0;    
transition: all 0.5s ease 0s;}#accordion .panel-title a.collapsed:after{    
content: "\f067";
}

#accordion .panel-body{    
padding: 10px 50px 10px 20px;    
border: none;    
font-size: 14px;    
color: #888;    
line-height: 25px;
}

Bước 2. Tạo cấu trúc CSS

 
 Khóa học Lập trình Bootstrap, HTML5, CSS3, RWD, JS 
 
 
  
 
   
 
    
 
     
 
      
  Phần 1 
      
 
     
 
     
 
      
 
       
Thiết kế giao diện website với Bootstrap CSS Framework [Bài 1]
 
       
Thiết kế giao diện website với Bootstrap CSS Framework [Bài 2]
 
       
Thiết kế giao diện website với Bootstrap CSS Framework [Bài 3]
 
      

  

 
     
 
    
 
    
 
     
 
      
 Phần 2  
      
 
     
 
     
 
      
 
       
Hướng dẫn cách sử dụng thành phần Button Groups trong Bootstrap [Bài 1]
 
       
Hướng dẫn cách sử dụng thành phần Navs trong Bootstrap [Bài 2]
 
       
Hướng dẫn cách sử dụng thành phần Navbar trong Bootstrap [Bài 3]
 
      
 
     
 
    
 
    
 
     
 
      
 Phần 3 
      
 
     
 
     
 
      
 
       
Hướng dẫn cách sử dụng thành phần Alerts trong Bootstrap [Bài 1]
 
       
Hướng dẫn cách sử dụng Typography trong Bootstrap [Bài 2]
 
       
Hướng dẫn thiết kế Menu Navigation Tab trong Bootstrap [Bài 3]
 
      
 
     
 
    
 
   
 
  
 
 

Bước 3. Call library Bootstrap

Bước 5. Call library JQUERY