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

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.

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

Model 2

Để 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ử:

Để 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>