Ẩn hiện hay thu gọn nội dung chỉ với CSS-Accordion or Collapsible content cho blogspot

Ẩn hiện nội dung hay nói cách khác là nội dung có thể thu gọn - Collapsible content, Accordion là một ứng dụng khi trang của bạn có nhiều nội dung về nhiều mảng khác nhau.

Việc sử dụng Accordion sẽ khiến cho website trở nên gọn gàng và người dùng cũng sẽ dễ dàng tìm tới nội dung mà họ muốn. Đối với Accordion ta có thể thu gọn nội dung bao gồm: Text, hình ảnh, code.....

Trong bài này mình sẽ cùng các bạn tìm hiểu cách tạo Accordion đơn giản chỉ với CSS và HTML.

Các bạn xem thử một ví dụ:

Accordion

Model 1

Accordion_first_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion_second_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion_third_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion

Model 2

Accordion_first_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion_second_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion_third_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Để thu gọn nội dung như ví dụ trên bạn cần thực hiện các bước sau:
Thêm CSS vào trong mẫu

.showH{margin:1.7em 0;font-size:.93rem;line-height:1.7em} 
details.ac{padding:18px 0;border-bottom:1px solid #eee} 
details.ac:first-child{border-top:1px solid #eee} 
details.ac summary{font-weight:700;cursor:pointer; display:flex;align-items:baseline; transition:all .1s ease} 
details.ac summary::before{content:'\203A'; flex:0 0 25px;display:flex;align-items:center;justify-content:flex-start;padding:0 5px; font-weight:400;font-size:1.33rem;color:inherit} details.ac[open] summary{color:#0b57cf} 
details.ac:not(.alt)[open] summary::before{transform:rotate(90deg);padding:0 0 0 5px;justify-content:center} 
details.ac.alt summary::before{content:'\002B'; padding:0 2px} 
details.ac.alt[open] summary::before{content:'\2212'} 
details.ac .aC{padding:0 25px;opacity:.9}

Khi viết bài bạn dùng code HTML như sau:
Model 1

<div class='showH'>
  <!--[ Accordion line 1 ]-->
  <details class='ac'>
    <summary>Accordion_first_title</summary>
    <div class='aC'>
    <!-- [Nội dung cần ẩn] -->
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>  
  <!--[ Accordion line 2 ]-->
  <details class='ac'>
    <summary>Accordion_second_title</summary>
    <div class='aC'>
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>
  <!--[ Accordion line 3 ]-->
  <details class='ac'>
    <summary>Accordion_third_title</summary>
    <div class='aC'>
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>
</div>

Model 2

<div class='showH'>
  <!--[ Accordion line 1 ]-->
  <details class='ac alt'>
    <summary>Accordion_first_title</summary>
    <div class='aC'>
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>  
  <!--[ Accordion line 2 ]-->
  <details class='ac alt'>
    <summary>Accordion_second_title</summary>
    <div class='aC'>
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>  
  <!--[ Accordion line 3 ]-->
  <details class='ac alt'>
    <summary>Accordion_third_title</summary>
    <div class='aC'>
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>
</div>

Có một cách thu gọn nội dung khác mà bạn có thể áp dụng, xem thử:

Title:

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Để sử dụng ứng dụng trên bạn cần thêm CSS sau vào trong mẫu.

details.sp{font-size:.93rem; padding:25px 25px 25px 45px; border:1px solid #989b9f;border-left:0;border-right:0;line-height:1.7em}
details.sp{padding:20px 15px} 
details.sp summary{display:flex;justify-content:space-between;align-items:baseline} 
details.sp summary::after{content:attr(data-show);font-size:12px; opacity:.7;cursor:pointer} 
details.sp[open] summary::after{content:attr(data-hide)}

Khi viết bài dùng code HTML

<details class='sp notranslate'>
  <summary data-show='Show all' data-hide='Hide all'>Title:</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>