DocsAllOver Lightweight FAQ Accordion Component with CSS Snippets

Lightweight FAQ Accordion Component with CSS

Oct. 15, 2024

CSS, Responsive, Card, Clean UI, Accordion, FAQ section

Full Screen

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lightweight FAQ Accordion Component</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
</head>

<body>
  <main>
    <section class="card">
      <!-- cube img -->
      <img
        src="https://raw.githubusercontent.com/MizAndhre/FAQ-accordion-card/2ff2a02d093554f14d0390a409e825669313a16e/images/illustration-box-desktop.svg"
        alt="Box" class="card__box" />
      <!-- Images -->
      <div class="card__img">
        <!-- mobile -->
        <img class="card__img-mobile"
          src="https://raw.githubusercontent.com/MizAndhre/FAQ-accordion-card/2ff2a02d093554f14d0390a409e825669313a16e/images/illustration-woman-online-mobile.svg"
          alt="Woman online Mobile" />
        <!-- desktop -->
        <img class="card__img-desktop"
          src="https://raw.githubusercontent.com/MizAndhre/FAQ-accordion-card/2ff2a02d093554f14d0390a409e825669313a16e/images/illustration-woman-online-desktop.svg"
          alt="Woman online desktop" />
      </div>

      <!-- Text -->
      <div class="card__text">
        <h1>FAQ</h1>

        <div class="accordion">
          <!-- item 1 -->
          <div class="accordion__item">
            <button class="accordion__title">
              How many team members can I invite?
            </button>

            <div class="accordion__collapse collapse">
              <div class="accordion__text">
                <p> You can invite up to 2 additional users on the Free plan.
                  There is no limit on team members for the Premium plan.</p>
              </div>
            </div>
          </div>
          <!-- item 2 -->
          <div class="accordion__item">
            <button class="accordion__title">
              What is the maximum file upload size?
            </button>

            <div class="accordion__collapse collapse">
              <div class="accordion__text">
                No more than 2GB. All files in your account must fit your
                allotted storage space.
              </div>
            </div>
          </div>
          <!-- item 3 -->
          <div class="accordion__item">
            <button class="accordion__title">
              How do I reset my password?
            </button>

            <div class="accordion__collapse collapse">
              <div class="accordion__text">
                Click “Forgot password” from the login page or “Change
                password” from your profile page. A reset link will be emailed
                to you.
              </div>
            </div>
          </div>
          <!-- item 4 -->
          <div class="accordion__item">
            <button class="accordion__title">
              Can I cancel my subscription?
            </button>

            <div class="accordion__collapse collapse">
              <div class="accordion__text">
                Yes! Send us a message and we’ll process your request no
                questions asked.
              </div>
            </div>
          </div>
          <!-- item 5 -->
          <div class="accordion__item">
            <button class="accordion__title">
              Do you provide additional support?
            </button>

            <div class="accordion__collapse collapse">
              <div class="accordion__text">
                Chat and email support is available 24/7. Phone lines are open
                during normal business hours.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</body>

</html>

@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap");

:root {
    --textBlue: hsl(238, 29%, 16%);
    --textRed: hsl(14, 88%, 65%);
    --textVeryDarkBlue: hsl(237, 12%, 33%);
    --textDarkBlue: hsl(240, 6%, 50%);
    --gradientViolet: hsl(273, 75%, 66%);
    --gradientBlue: hsl(240, 73%, 65%);
    --dividerGray: hsl(240, 5%, 91%);
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Kumbh Sans", sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    background: linear-gradient(var(--gradientViolet), var(--gradientBlue));
}

main {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    background-color: #fff;
    border-radius: 2.5rem;
    min-width: 33rem;
    max-width: 92rem;
    margin: 0 2.5rem 6rem;
    padding: 0 2.3rem 4.8rem;
    background-image: url("https://raw.githubusercontent.com/MizAndhre/FAQ-accordion-card/2ff2a02d093554f14d0390a409e825669313a16e/images/bg-pattern-mobile.svg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 24rem;
}

.card__box {
    display: none;
}

.card__img {
    position: relative;
}

.card__img-mobile {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-60%);
    display: block;
    width: 100%;
    height: auto;
    max-width: 24rem;
}

.card__img-desktop {
    display: none;
}

.card__text {
    margin-top: 12.9rem;
}

h1 {
    margin: 0;
    padding-bottom: 1.5rem;
    font-size: 3.3rem;
    font-weight: 700;
    text-align: center;
    color: var(--textBlue);
}

.accordion__item {
    border-bottom: 0.1rem solid var(--dividerGray);
}

.accordion__item h2 {
    margin: 0;
}

.accordion__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.45rem 0.5rem;
    border: none;
    background: none;
    font-family: "Kumbh Sans", sans-serif;
    font-size: 1.4rem;
    color: var(--textVeryDarkBlue);
    text-align: left;
    transition: all 300ms ease-in-out;
}

.accordion__title:focus,
.accordion__title:focus-visible {
    z-index: 3;
    outline: solid rgba(255, 146, 113, 0.5);
    box-shadow: 0 0 0.4rem 0.4rem rgba(161, 72, 45, 0.25);
    border-radius: 0.3rem;
}

.accordion__title:hover {
    cursor: pointer;
    color: var(--textRed);
}

.accordion__title::after {
    content: "";
    display: block;
    width: 1rem;
    height: 0.6rem;
    background-image: url("https://raw.githubusercontent.com/MizAndhre/FAQ-accordion-card/2ff2a02d093554f14d0390a409e825669313a16e/images/icon-arrow-down.svg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 300ms ease-in-out;
}

.accordion__text {
    text-align: left;
    padding: 0.5rem 3rem 2.2rem 0.5rem;
    line-height: 1.5;
    color: var(--textDarkBlue);
}

/* JS Classes */
.accordion__title.open {
    font-weight: 700;
    color: var(--textBlue);
}

.accordion__title.open::after {
    transform: rotate(180deg);
}

.accordion__collapse.collapse {
    display: none;
}

.accordion__collapse.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 1s ease;
}

.accordion__collapse.open {
    display: block;
}

/* DESKTOP STYLE */
@media (min-width: 56em) {
    .card {
        position: relative;
        display: flex;
        padding: 6.1rem 9.4rem 8.4rem 0;
        margin: 0;
        background-image: url("https://raw.githubusercontent.com/MizAndhre/FAQ-accordion-card/2ff2a02d093554f14d0390a409e825669313a16e/images/bg-pattern-desktop.svg");
        background-size: 100%;
        /* background-position: -73rem center; */
        background-position: -53rem -28rem;
    }

    .card__box {
        display: block;
        position: absolute;
        z-index: 1;
        top: 57%;
        left: 0;
        transform: translateX(-50%) translateY(-50%);
    }

    .card__img,
    .card__text {
        flex: 1;
    }

    .card__img {
        display: flex;
        align-items: center;
        overflow: hidden;
        padding-right: 9.2rem;
    }

    .card__img-mobile {
        display: none;
    }

    .card__img-desktop {
        display: block;
        max-width: 47.2rem;
        transform: translateX(-8.4rem);
    }

    .card__text {
        margin-top: 0;
    }

    h1 {
        padding-bottom: 2.1rem;
        text-align: left;
    }

    .accordion__title {
        font-size: 1.5rem;
    }

    .accordion__text {
        line-height: 1.4;
        padding: 0.5rem 3rem 2rem 0.5rem;
    }
}

/* FOOTER */
.attribution {
    text-align: center;
    font-size: 1.5rem;
    padding-bottom: 2rem;
    color: var(--dividerGray);
}

.attribution a {
    color: #fff;
    text-decoration: none;
    transition: color 200ms ease-in-out;
    font-weight: 700;
}

.attribution a:hover {
    color: var(--textRed);
}

.icons i {
    margin-top: 1rem;
    font-size: 2.5rem;
    padding-right: 1rem;
}

const accordionBtns = document.querySelectorAll(".accordion__title");

accordionBtns.forEach((button) => {
    button.addEventListener("click", (event) => {
        let accCollapse = button.nextElementSibling;

        if (!button.classList.contains("collapsing")) {
            // open accordion item
            if (!button.classList.contains("open")) {
                accCollapse.style.display = "block";
                let accHeight = accCollapse.clientHeight;

                setTimeout(() => {
                    accCollapse.style.height = accHeight + "px";
                    accCollapse.style.display = "";
                }, 1);

                accCollapse.classList = "accordion__collapse collapsing";

                setTimeout(() => {
                    accCollapse.classList = "accordion__collapse collapse open";
                }, 300);
            }
            //close accordion item
            else {
                accCollapse.classList = "accordion__collapse collapsing";

                setTimeout(() => {
                    accCollapse.style.height = "0px";
                }, 1);

                setTimeout(() => {
                    accCollapse.classList = "accordion__collapse collapse";
                    accCollapse.style.height = "";
                }, 300);
            }

            button.classList.toggle("open");
        }
    });
});

This CSS-based FAQ accordion component offers a clean and efficient way to organize and present frequently asked questions on your website. It provides a compact and visually appealing layout, making it suitable for various web projects.

Key Features:

Responsive Design: The accordion adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.
Customizable Styling: Easily modify the appearance of the accordion using CSS to match your website's design and branding.
Lightweight Code: The component is designed to be lightweight and efficient, minimizing performance impact.
Collapsible Sections: Users can expand or collapse individual sections to reveal or hide answers.

Implementation:

Create the HTML Structure: Set up the basic HTML structure for the accordion, including the container, headers, and content sections.
Apply CSS Styles: Use CSS rules to style the accordion elements, such as the container, headers, content sections, and the arrow icons for expanding and collapsing sections. You can customize the colors, fonts, and spacing to match your website's design.

Latest Snippets

View All