Trang chủ thủ thuật blogspot Tạo Accordion cho blog

Tạo Accordion cho blog

tháng 10 22, 2022
Accordion là dạng tiêu đề mô tả với chức năng mở và đóng mô tả.
Để tạo Accordion cho blog, bạn thực hiện theo hướng dẫn sau :

Bước 1 - Thêm CSS

Đăng nhập Trang Quản trị Blogger » Chủ đề » Tùy chỉnh » Chỉnh sửa HTML tìm đến thẻ đóng </head> và dán đoạn CSS sau đây vào trước nó. 
<style>/*<![CDATA[*/
  .accordion .accordion-content{margin:10px 0;border-radius:4px;background:#FFF7F0;border:1px solid #FFD6B3;overflow:hidden}
  .accordion-content:nth-child(2){background-color:#F0FAFF;border-color:#CEF}
  .accordion-content:nth-child(3){background-color:#FFF0F3;border-color:#FFCCD6}
  .accordion-content:nth-child(4){background-color:#F0F0FF;border-color:#CCF}
  .accordion-content.open{padding-bottom:10px}
  .accordion-content .a-header{display:flex;min-height:50px;padding:0 15px;cursor:pointer;align-items:center;justify-content:space-between;transition:all .2s linear}
  .accordion-content.open .a-header{min-height:35px}
  .accordion-content .a-header .a-title{font-size:14px;font-weight:500;color:#333}
  .accordion-content .a-header i{font-size:15px;color:#333}
  .accordion-content .a-description{height:0;margin:0!important;font-size:12px;color:#333;font-weight:400;padding:0 15px;transition:all .2s linear}
/*]]>*/</style>

Bước 2 - Thêm thư viện font awesome

Copy đoạn code bên dưới và Paste vào trước thẻ </head>. 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>

Bước 3 - Thêm Javascript

Copy đoạn Javascript bên dưới và Paste vào trước thẻ </body>. 
<script>//<![CDATA[
  const accordionContent = document.querySelectorAll(".accordion-content");

  accordionContent.forEach((item, index) => {
    let header = item.querySelector(".a-header");
    header.addEventListener("click", () =>{
      item.classList.toggle("open");

      let description = item.querySelector(".a-description");
      if(item.classList.contains("open")){
        description.style.height = `${description.scrollHeight}px`;
        item.querySelector("i").classList.replace("fa-plus", "fa-minus");
      }else{
        description.style.height = "0px";
        item.querySelector("i").classList.replace("fa-minus", "fa-plus");
      }
      removeOpen(index);
    })
  })

  function removeOpen(index1){
    accordionContent.forEach((item2, index2) => {
      if(index1 != index2){
        item2.classList.remove("open");

        let des = item2.querySelector(".a-description");
        des.style.height = "0px";
        item2.querySelector("i").classList.replace("fa-minus", "fa-plus");
      }
    })
  }
//]]></script>

Bước 4 - Áp dụng vào bài viết

Tại bài viết bạn chuyển sang Chế độ HTML sau đó copy và dán đoạn code HTML dưới đây vào rồi lưu lại. 
<div class="accordion">
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
    </p>
  </div>
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
    </p>
  </div>
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto neque, sed inventore illum ut quis ducimus deleniti temporibus maiores? At nisi sed pariatur cupiditate quidem quod adipisci aut, eos quis minima voluptates non veniam ipsam quasi architecto ducimus error eum id ab, suscipit doloribus, ut accusantium consequuntur voluptate! Unde, hic sed rerum officia totam id libero officiis nihil rem sequi porro labore praesentium repudiandae a blanditiis molestias nisi beatae natus! Ea, ut voluptates, natus harum nesciunt odio hic eveniet reprehenderit veritatis, possimus tempora magni soluta eaque quidem neque maxime nostrum sapiente commodi? Earum ex cumque cupiditate dicta, tempora temporibus quaerat.
    </p>
  </div>
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
    </p>
  </div>
</div>

Chúc bạn thành công!

Source: https://www.qrviet.me