CSS & JS Effect – FAQ Accordion & Slide Down

效果

参考:

Youtube – Responsive FAQ accordion dropdown | HTML and CSS Tutorial

几个难点

1. 如何 align left for +- icon.

2. 如何实现点击

3. 如何实现 slide down

一步一步做

Semantic HTML

<div class="container">
  <details>
    <summary>question 1</summary>
    <p>answer</p>
  </details>

  <details>
    <summary>question 2</summary>
    <p>answer</p>
  </details>
</div> 

Semantic 处理这种信息一般上是用 details > sumary + p

效果

默认就自带效果了, 但是这不是预期要的.

左边的小箭头来自于 summary display: list-item, 它是一个 marker 来的.

HTML

<div class="container">
  <details class="faq" open>
    <summary class="question">
      question 1<i class="plus-icon fa-solid fa-plus"></i
      ><i class="minus-icon fa-solid fa-minus"></i>
    </summary>
    <div class="answer">
      <p>answer</p>
    </div>
  </details>
</div>

加上了 plus / minus icon, 还有各个 class selector

details 的 open attribtue 是为了要平仓掉默认的功能.

完整版 HTML

<div class="container">
  <details class="faq" open>
    <summary class="question">
      Q. Can CoolMan attend to my aircon issue at the time I want?<i
        class="plus-icon fa-solid fa-plus"
      ></i
      ><i class="minus-icon fa-solid fa-minus"></i>
    </summary>
    <div class="answer">
      <p>
        Yes, we can perform the repairing works at your desired timing, but
        note that our repair schedule varies depending on the job complexity
        and volumes. To avoid disappointment, we strongly recommend that you
        book an appointment with us through ONLINE BOOKING.
      </p>
    </div>
  </details>
  <details class="faq" open>
    <summary class="question">
      Q. What’s wrong with my aircon? It doesn’t turn on at all.<i
        class="plus-icon fa-solid fa-plus"
      ></i
      ><i class="minus-icon fa-solid fa-minus"></i>
    </summary>
    <div class="answer">
      <p>
        Check whether AC power gets to your aircon. If there’s no power,
        check the fuses or MCB circuit breakers. If there’s still no power,
        do contact our qualified technician to rectify the issue for you.
      </p>
    </div>
  </details>
</div>

CSS Style

.container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 576px;
  margin-inline: auto;

  .faq {
    --answer-scroll-height: 0;
    cursor: pointer;
    .question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;

      .minus-icon {
        display: none;
      }
    }

    .answer {
      height: 0;
      overflow: hidden;
      transition: height 0.4s;
    }

    &.opened {
      .question {
        .minus-icon {
          display: block;
        }
        .plus-icon {
          display: none;
        }
      }
      .answer {
        height: var(--answer-scroll-height);
      }
    }
  }
}

上面提到了 3 个难点

1. 如何 align left for +- icon

使用 Flex.

还有一种做法是使用 :after 做出 icon, 然后绝对定位 rigth: 0, 在加上 padding-right 做空间. 但我觉得这种方法非常不直观. 还是用 Flex 好一些.

2. 如何实现点击

用 JS, 点击的时候添加一个 class opened, CSS 依赖这个 class 做效果

还有一种做法是用 anchor + href # hash + :target 来实现 (上面参考的视频). 但是我个人觉得用 JS 更直观一些.

3. 如何实现 slide down

用 max-height, 但是会遇到 CSS 冷知识 – Transition 对 height: auto / fit-content 无效 的问题.

解决方法是用 JS 获取 scroll height 然后通过 CSS variables 传进来,  (上面参考视频的方式是给一个大约的值, 这样做的好处是不需要 JS, 坏处就是不太准确)

注: 如果用 JS 传 CSS variables 那就不需要用 max-height 了, 可以直接用 height.

Javascript

// 清除 HTML 默认 details 行为
document.querySelectorAll("details > summary").forEach((el) => {
  el.addEventListener("click", (e) => e.preventDefault());
});

const faqs = Array.from(document.querySelectorAll(".faq"));
for (const faq of faqs) {
  const answer = faq.querySelector(".answer");
  faq.style.setProperty("--answer-scroll-height", answer.scrollHeight + "px"); // 注入每一个的 scroll height

  faq.addEventListener("click", () => {
    faqs.forEach((f) => f.classList.remove("opened")); // 关闭所有
    faq.classList.add("opened"); // 开启当前这一个
  });
}

补上一个场景难题: 动态内容

上面我们用的方式是在 slide down 的时候给 element height. 这样会衍生一个问题. 那就是 element 丢失了 height: auto 原有的特性 hug content.

所以当内容增加的时候, 整个 container 的 height 依旧是打开时候的 height. 解决思路很简单就是把 height set 成 auto. 只是要控制好时机.

在 transitionend 的时候把 height set 成 auto. 这样就 hug content 了.

cardWrapper.addEventListener('transitionend', () => {
  if (cardWrapper.style.height !== '') { // 只有开的时候 set auto 哦, 关闭的时候不要 set 哦
    cardWrapper.style.height = 'auto';
  }
});

但马上会发现关闭的时候出问题了.

因为 height: auto -> 0 是触发不了 transition 的, 所以在 close 的时候我们需要先把它 set 回去 height: scrollHeight 等渲染后再 set 成 0

closeBtn.addEventListener('click', () => {
  if (cardWrapper.style.height === 'auto') { // auto 代表已经 opened 了
    cardWrapper.style.height = `${cardWrapper.scrollHeight}px`;
    requestAnimationFrame(() => {
      cardWrapper.style.removeProperty('height');
    });
  } else { // 没有 auto 代表还没有 slide 完 user 就已经点击 close 了. 这时只要 remove height 就可以了
    cardWrapper.style.removeProperty('height');
  }
});

至此 slide down 就支持动态内容了

测试代码

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://kit.fontawesome.com/046b7760d4.js" crossorigin="anonymous" defer></script>
    <script src="./bundle.js" defer></script>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <button class="open-btn">open</button>
        <button class="close-btn">close</button>
      </div>
      <div class="card-wrapper">
        <div class="card">
          <h1 class="title">Hello World</h1>
          <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, voluptatibus.</p>
          <button class="add-more-btn">add more</button>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  .container {
    margin-top: 30vh;
    max-width: 1280px;
    margin-inline: auto;

    button {
      border-width: 0;
      background-color: transparent;
      border: 1px solid red;
      padding: 0.5rem 1rem;
      cursor: pointer;
    }

    display: flex;
    gap: 2rem;

    .action {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .card-wrapper {
      height: 0;
      overflow-y: hidden;
      transition: height 1s;

      .card {
        background-color: pink;
        padding: 1rem;

        .title {
          font-size: 1.5rem;
          margin-bottom: 1rem;
        }
        .description {
          line-height: 1.5;
          white-space: pre-line;
        }
        .add-more-btn {
          margin-top: 1rem;
        }
      }
    }
  }
}

JavaScript

const openBtn = document.querySelector('.open-btn')!;
const cardWrapper = document.querySelector<HTMLElement>('.card-wrapper')!;
openBtn.addEventListener('click', () => {
  cardWrapper.style.height = `${cardWrapper.scrollHeight}px`;
});

const closeBtn = document.querySelector('.close-btn')!;
closeBtn.addEventListener('click', () => {
  if (cardWrapper.style.height === 'auto') {
    cardWrapper.style.height = `${cardWrapper.scrollHeight}px`;
    requestAnimationFrame(() => {
      cardWrapper.style.removeProperty('height');
    });
  } else {
    cardWrapper.style.removeProperty('height');
  }
});

cardWrapper.addEventListener('transitionend', () => {
  if (cardWrapper.style.height !== '') {
    cardWrapper.style.height = 'auto';
  }
});

const addMoreBtn = document.querySelector('.add-more-btn')!;
const description = document.querySelector('.description')!;
addMoreBtn.addEventListener('click', () => {
  description.textContent = `${description.textContent}\n${description.textContent}`;
});

补上一个场景难题: Flex item slide down

中间这个 message 一开始是 hidden 的, 在 submit succeeded 后才 slide down.

它一开始必须是 display:none 不然会导致 double gap

因为即便 height: 0, visibility: hidden. element 依然是存在的, 那么就会有 gap

所以必须用 display: none, 而 display: none 会导致无法获取到 scrollHeight.

所以我们不可以像上面例子中那样, 提前去拿 scrollHeight, 而是要等到 display: block 了以后才获取 scrollHeight set CSS variable.

CSS variable 的改变是会触发 transition 的. 不必担心. 类似这样:

冷知识 – <details> display: flex 无效

如果想在 question 和 answer 中制造间距, 就只能使用 margin-top 或 margin-bottom 了. 用不到 gap.

不管是给 question margin-bottom 还是 answer margin-top. 关闭时看上去都很奇怪.

中间大片空白就是 answer 的间距. 正确的做法应该是只有在开启的时候才给 margin-top.

Accordion 搭配 location hash

accordion 开关是 JavaScript 控制的, 所以当页面刷新后, 它会丢失掉之前的记录 (游览器不知道刷新前打开着哪一个)

这个体验通常是没有问题的, 但如果想解决它也不难. 可以使用 History API

步骤

1. 为每一个 item 配置一个 id 和 data-location-hash="someUniqueId"

2. 打开时添加 hash 到 URL 上

const itemLocationHash = item.dataset.locationHash!;
history.replaceState(undefined, '', `#${itemLocationHash}`);

3. 关闭时 remove hash from URL

history.replaceState(undefined, '', `${location.pathname}${location.search}`);

4. 当 page load 的时候判断是否开启 base on URL hash

if (location.hash !== '' && location.hash.substring(1) === itemLocationHash) {
  open();
}

开关效果

refresh 效果