Xin chào mọi người, hôm nay mình thấy có bài viết này chia sẽ ở trang toishare.com cũng khá hay và nhìn rất đẹp mắt để những anh em viết bài tích hợp vào trang bài viết cũng khá hay nhé mọi người.
[TIPS] Tạo Accordion sử dụng code HTML, CSS và JavaScript cho Blog/Website

Về cơ bản, mô tả của accordion ở trạng thái ẩn và chúng ta phải nhấp vào phần tiêu đề để hiện mô tả. Mỗi tiêu đề của accordion có mô tả riêng. Accordion có thể được chứa nhiều nội dung văn bản khác nhau, ví dụ như Câu hỏi thường gặp.

Tạo Accordion sử dụng code HTML, CSS và JavaScript cho Website/Blog
Sau đây là source code Tạo Accordion sử dụng code HTML, CSS và JavaScript cho Website/Blog, mình sẽ chia sẻ code HTML và JavaScript là chính còn CSS thì mình sẽ chỉ để ở mức độ tham khảo và các bạn cần phải chỉnh sử CSS hay tuỳ biến cho phù hợn với Blog của các bạn.

HTML Code:

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

CSS Code chèn vào trước thẻ </head>

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

Thêm thư viện font awesome 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"/>

JavaScript Code chèn 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>

Lời kết

Thế là mình đã chia sẻ xong cho các bạn Tạo Accordion sử dụng code HTML, CSS và JavaScript cho Website/Blog. Các bạn có vấn đề gì liên quan đến code trong bài viết thì có thể comment xuống dưới mình sẽ hỗ trợ nhanh nhất. Các bạn xem demo code dưới đây nhé:

DEMO THỦ THUẬT.

HTML CODE

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

CSS Code

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

Font Awesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>

JavaScript Code

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


Chúc mọi người thành công với thủ thuật trên.