Tạo Accordion với CSS3

Accordion là một kỹ thuật giúp bạn rút gọn nội dung mà bạn muốn hiển thị trên website. Nó thường được dùng cho việc hiển thị các menu con. Ngoài ra bạn cũng có thể dùng nó cho nội dung, hình ảnh. Trước đây khi áp dụng thủ thuật này, bạn phải dùng đến JavaScript hoặc JQuery. Nhưng trong bài viết này, mình sẽ chia sẻ với các bạn làm thủ thuật này với chỉ CSS3.

Các bạn có thể xem Demo tại đây

Đầu tiên chúng ta cần có một đoạn HTML  để làm demo

     
<div id="experiment"> 
 <div> 
    <h2>Accordion Demo</h2> 
    <div id="one"> 
       <h3> <a href="#one">Heading 1</a> </h3> 
       <div>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
       </div> 
    </div>

    <div id="two"> 
       <h3> <a href="#two">Heading 2</a> </h3> 
         <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
        </div> 
    </div> 

    <div id="three"> 
       <h3> <a href="#three">Heading 3</a> </h3> 
       <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p> 
      </div> 
    </div> 

    <div id="four"> 
         <h3> <a href="#four">Heading 4</a> </h3> 
         <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
       </div> 
   </div> 

  <div id="five"> 
     <h3> <a href="#five">Heading 5</a> </h3> 
     <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
 </div> 

 <div id="six"> 
    <h3> <a href="#six">Heading 6</a> </h3> 
   <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
  </div> 
</div> 

</div> 
</div> 

     

Trước tiên là áp dụng một vài lệnh css cho việc trang trí

.accordion {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #999999;
margin: 2em auto;
padding: 0 1em 24px;
awidth: 500px;
}
.accordion h2 {
margin: 12px 0;
}
.accordion .section {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #CCCCCC;
padding: 0 1em;
}
.accordion h3 a {
display: block;
font-weight: normal;
padding: 1em 0;
}
.accordion h3 a:hover {
text-decoration: none;
}
.accordion h3 + div {
-moz-transition: height 0.3s ease-in 0s;
height: 0;
overflow: hidden;
}
.accordion *:target h3 a {
font-weight: bold;
text-decoration: none;
}
.accordion *:target h3 + div {
height: 100px;
}
.accordion .section.large:target h3 + div {
overflow: auto;
}

Đoạn css trên chỉ là giúp chúng ta định dạng cho dễ nhìn, và đây là đoạn css giúp chúng ta tạo hiệu ứng Accordion.

.accordion h3 + div {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}

.accordion :target h3 + div {
height: 100px;
}

.accordion .section.large:target h3 + div {
overflow: auto;
}

Thật đơn giản và dễ thực hiện phải không nào ? Mình hy vọng với bài viết này sẽ giúp bạn có thêm kiến thức và kinh nghiệm trong việc sử dụng CSS3.
Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster