Có phải bạn đang cần tìm mẫu code ẩn hiển nội dung? mẫu HTML Accodion, tiện thể hôm nay VeoSpot chia sẻ Free Code Blogger Accodion (Code Ẩn Hiện Nội Dung) Thủ Thuật Blogspot, nếu bạn đang phát triển blog thì code này ko thể thiếu...

Hướng dẫn áp dụng code Accodion vào blospot

- Các bước thực hiện thì rất là đơn giản, các bạn chỉ cần copy past và nời mà bạn muốn nó hiển thị nội dung, nhớ làm theo hướng dẫn nhé, phần này chúng ta sẽ có 3 phần, 1 CSS, 2 HTML, 3 Javascript

- Bước 1: CSS

+ Thêm CSS trước thẻ đóng </head> hoặc trong thẻ </b:skin>

  .container {
  margin: 0 auto;
  width: 100%;
}

.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded=true] {
  border-bottom: 1px solid #03b5d2;
}
.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}
.accordion button:hover, .accordion button:focus {
  cursor: pointer;
  color: #03b5d2;
}
.accordion button:hover::after, .accordion button:focus::after {
  cursor: pointer;
  color: #03b5d2;
  border: 1px solid #03b5d2;
}
.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}
.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}
.accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}
.accordion button[aria-expanded=true] {
  color: #03b5d2;
}
.accordion button[aria-expanded=true] .icon::after {
  width: 0;
}
.accordion button[aria-expanded=true] + .accordion-content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 1rem;
  font-weight: 100;
  margin: 1em 0;
}

- Bước 2: HTML

+ Tiếp tục dán thẻ HTML và nơi mà bạn muốn nó hiển thị, nhớ chỉnh sửa nội dung theo ý của bạn nhé, hoặc dán trong bài viết của bạn cũng được

 <div class="container">
  <h2>Frequently Asked Questions</h2>
  <div class="accordion">
    <div class="accordion-item">
      <button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">Ẩn hiển nội dung</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Your Content Goes Here...</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">Ẩn hiển nội dung</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Your Content Goes Here...</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-3" aria-expanded="false"><span class="accordion-title">Ẩn hiển nội dung</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Your Content Goes Here...</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-4" aria-expanded="false"><span class="accordion-title">Ẩn hiển nội dung</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Your Content Goes Here...</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">Ẩn hiển nội dung</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Your Content Goes Here...</p>
      </div>
    </div>
  </div>
</div>

- Bước 1: Javascript

+ Nếu bạn dùng các mẫu template cũ thì bạn Dán Javascript này trước thẻ </body> nhé, còn nếu bạn dùng template phiên bản cao cấp bên VeoSpot cung cấp thì bạn dán trong thẻ Script cuả nó nha.

<script>
const items = document.querySelectorAll(".accordion button");
function toggleAccordion() {
  const itemToggle = this.getAttribute('aria-expanded');
  for (i = 0; i < items.length; i++) {
    items[i].setAttribute('aria-expanded', 'false');
  }
  if (itemToggle == 'false') {
    this.setAttribute('aria-expanded', 'true');
  }
}
items.forEach(item => item.addEventListener('click', toggleAccordion));
  </script>

- Trên đây là bộ code Accodion (Code Ẩn Hiện Nội Dung) mà bạn cần, nếu bạn cảm thấy bài viết hữu ích thì đừng quên comments góp ý ở bên dưới nhé, bạn cần veospot.com hỗ trợ thì cứ việc liên hệ ngay trên zalo nhé!...

- Đọc thêm: Code Sitemap Blogger (Blogspot) Đẹp Giống Bài Đăng mới (Recent post)