arrow_back
View code

<section class="faq-v2">
  <div class="text-center padding-top-xxlg">
    <div class="text-xxxxlg font-bold">Your questions, Answered</div>
  </div>
  <div class="text-sm margin-top-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, unde?
    Repellat, cupiditate illum dicta officia nam expedita fugiat iure voluptates libero dignissimos unde.
    Architecto!
  </div>
  <ul class="faq-accordion">
    <li>
      <svg class="arrow" fill="none" viewBox="0 0 33 33">
        <path stroke-width="2" d="M32 17.15L16.5 2.303 1 17.15M16.658 2v31" />
      </svg>

      <div class="title text-sm font-medium">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint?</div>
      <div class="content padding-top-md">
        <p>
          <span class="text-xs">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet debitis inventore aliquam rerum beatae cumque quisquam sunt expedita, accusamus, hic facilis voluptatibus nihil deserunt porro blanditiis! Mollitia quidem sapiente fugit.
            <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quasi.</div>
          </span>
        </p>
      </div>

    </li>
    <li>
      <svg class="arrow" fill="none" viewBox="0 0 33 33">
        <path stroke-width="2" d="M32 17.15L16.5 2.303 1 17.15M16.658 2v31" />
      </svg>
      <div class="title text-sm font-medium">Sequi necessitatibus asperiores perferendis voluptatum?</div>
      <div class="content padding-top-md">
        <p>
          <span>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem odit, numquam similique blanditiis commodi maxime error nulla nam libero ipsa et illum consectetur excepturi ipsum voluptatum nemo alias enim. Beatae error deleniti, tempora eveniet provident incidunt sunt voluptatibus voluptatem eius officiis libero amet ducimus itaque doloribus quis alias nesciunt vel quidem, ab rerum, temporibus corrupti suscipit? Voluptatum iste officiis recusandae!
          </span>
        </p>
      </div>
    </li>
    <li>
      <svg class="arrow" fill="none" viewBox="0 0 33 33">
        <path stroke-width="2" d="M32 17.15L16.5 2.303 1 17.15M16.658 2v31" />
      </svg>
      <div class="title text-sm font-medium">Quam cum eius voluptatum tempora reiciendis quidem eos?</div>
      <div class="content padding-top-md">
        <p>
          <span>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, minus!
          </span>
        </p>
      </div>
    </li>
    <li>
      <svg class="arrow" fill="none" viewBox="0 0 33 33">
        <path stroke-width="2" d="M32 17.15L16.5 2.303 1 17.15M16.658 2v31" />
      </svg>
      <div class="title text-sm font-medium">Autem quisquam ex natus illum quia voluptate sit quos.</div>
      <div class="content padding-top-md">
        <p>
          <span>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, molestiae eveniet? Vitae cum explicabo, commodi voluptatum vero, quasi doloremque ipsa dignissimos in nobis voluptate facilis.
          </span>
        </p>
      </div>
    </li>
  </ul>
</section>
                        
Copy HTML

/*
 * File: _faq-v2.scss
 * Location /src/scss/components
 * FAQ v2 component
 */

:root {
    --faq-v2-item-padding: 60px;
}

.faq-v2 {
    ul.faq-accordion {
        list-style: none;
        margin-top: 10px;
        padding: 0;

        li {
            position: relative;
            .arrow {
                position: absolute;
                right: 0;
                top: calc(var(--faq-v2-item-padding) + 5px);
                width: 30px;
                height: 30px;
                path {
                    stroke: var(--primary-color);
                }
                transition: transform 0.3s;
                &.open {
                    transform: rotate(180deg);
                }
            }
            .title {
                cursor: pointer;
                padding: var(--faq-v2-item-padding) var(--faq-v2-item-padding) var(--faq-v2-item-padding) 0;
            }
            border-bottom: 3px solid var(--color-lowest);
            .content {
                display: none;
                height: auto;
                padding-top: 0;
                padding-bottom: 70px;
                transition: height 0.3s;
            }
        }
    }
}
                        
Copy SCSS

/*
 * File: faq-v2.js
 * Location /src/js/components
 * FAQ v2 component
*/

document.querySelectorAll(".faq-v2").forEach((faq) => {
  let show = false;
  let transitionId;
  function reset(e) {
    e.target.style.paddingBottom = null;
    e.target.style.height = null;
    e.target.style.overflow = null;
    clearTimeout(transitionId);
    show = !show;
    if (!show) {
      e.target.style.display = null;
      e.target.setAttribute("data-open", false);
    } else {
      e.target.setAttribute("data-open", true);
    }
    e.target.removeEventListener("transitionend", reset, true);
  }
  const set = (content, show) => {
    if (!show) {
      content.style.visibility = "hidden";
      content.style.display = "block";
      const contentHeight = content.offsetHeight;
      content.style.height = "0px";
      content.setAttribute("data-show", true);
      transitionId = setTimeout(() => {
        console.log("showing", contentHeight);
        content.style.visibility = null;
        content.style.paddingBottom = "0px";
        content.style.height = `${contentHeight}px`;
        content.style.overflow = "hidden";

        content.addEventListener("transitionend", reset, true);
      }, 0);
    } else {
      const contentHeight = content.offsetHeight;
      content.style.height = `${contentHeight}px`;
      content.setAttribute("data-show", false);
      transitionId = setTimeout(() => {
        content.style.paddingBottom = "0px";
        content.style.height = `0px`;
        content.style.overflow = "hidden";
        content.addEventListener("transitionend", reset, true);
      }, 0);
    }
  };
  let lastItem = null;
  faq.querySelectorAll("li").forEach((item) => {
    const title = item.querySelector(".title");
    const content = item.querySelector(".content");
    const arrow = item.querySelector(".arrow");

    title.addEventListener("click", () => {
      show =
        content.getAttribute("data-open") &&
        content.getAttribute("data-open") == "true"
          ? true
          : false;
      lastItem = title;
      arrow.classList.toggle("open");
      console.log(show);
      set(content, show);
    });
  });
});

Copy JS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.