• Giới thiệu
  • Liên hệ
  • Điều khoản
  • Bảo mật
Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
Tin Tức Tổng Hợp
No Result
View All Result

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

Đoàn Hải by Đoàn Hải
Tháng Ba 23, 2022
Home 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.

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.

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


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

Nội dung

  • Accordion
  • Accordion
    • Bài viết liên quan:

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>

Đánh giá bài viết
[Total: 1 Average: 5]

Bài viết liên quan:

  1. Code chống bôi đen văn bản tùy chọn theo vùng chỉ với CSS cho blogspot
  2. 50+ Best Real Estate Website Templates 2022
  3. 60+ Best Hosting Website Templates 2022
  4. Mẫu Blogger mua sắm đáp ứng SpotCommerce v1.5
  5. Cách Tạo và Gửi Sơ đồ trang web Blogger với Nguồn cấp dữ liệu Atom.xml
Tags: teamplateteamplate bloggerTeamplate Blogspotthủ thuật bloggerthủ thuật blogspot
Đoàn Hải

Đoàn Hải

Next Post
8 Plugin WordPress tốt nhất để bán các sản phẩm kỹ thuật số 2022

8 Plugin WordPress tốt nhất để bán các sản phẩm kỹ thuật số 2022

7 cách giải mã PC Windows của bạn

7 cách giải mã PC Windows của bạn

Code chống bôi đen văn bản tùy chọn theo vùng chỉ với CSS cho blogspot

Code chống bôi đen văn bản tùy chọn theo vùng chỉ với CSS cho blogspot

Login
guest
guest
0 Góp ý
Inline Feedbacks
Xem tất cả các bình luận

Ân sủng là gì? Sự ân sủng là gì?

Misoa là ai? Nữ MC lên tiếng “bị bạn trai tác động vật lý”

DQ là số điện thoại của ai? Vì sao gọi cho bạn?

M3p là ai? Làm nghề gì?

Quỷ Satan Là Ai? Sức Mạnh Của Quỷ Satan Là Gì?

Satan là ai? 4 câu truyện đáng sợ liên quan đến Satan

  • Viết BLog
    • Giới thiệu
    • Liên hệ
    • Điều khoản
    • Bảo mật

    © 2021 Đoàn Hải Blog

    No Result
    View All Result
    • Home
    • Designer
      • PHOTOSHOP
        • Tutorial
        • Download
      • ILLUSTRATOR
        • Tutorial
        • Download
      • LIGHTROOM
        • Tutorial
        • Download
      • PHOTOGRAPHY
    • Blogspot
      • Template Blogspot
      • Thủ Thuật Blogspot
    • WordPress
      • Plugin WordPress
      • Theme WordPress
      • Thủ Thuật WordPress
    • Thủ Thuật
      • Công Nghệ
      • Web
      • Windows
    • Tài Liệu
      • Lập Trình
      • Khóa học
      • Phần mềm
      • Tiktok
    • GAME
      • Game Offline
      • Game Online

    © 2021 Đoàn Hải Blog

    wpDiscuz
    0
    0
    Rất thích suy nghĩ của bạn, hãy bình luậnx
    ()
    x
    | Reply