DEV Community

Ahtsham Ajus
Ahtsham Ajus

Posted on

Today I learned To Creat a FAQ Collapse

All right, so now we want to style these buttons, these icon buttons, position them.

We want to give functionality to them so we can expand and contract these fake cues.

So we have a class of fake cue dash toggle on the button.

And obviously, we don't want to show the Chevron if it's expanded and we don't want to show the X if

it's if it's not expanded.

So we're going to have to deal with that.

But let's just do some basic stuff here first.

Like the background color I'm going to set to transparent and take away the border set.

Here's HTML code

<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">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="./style.css">
  <title>FAQ Collapse</title>
</head>

<body>
  <h1>Frequently Asked Questions</h1>
  <div class="faq-container">
    <div class="faq active">
      <h3 class="faq-title">
        Why shouldn't we trust atoms?
      </h3>

      <p class="faq-text">
        They make up everything
      </p>

      <button class="faq-toggle">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="faq">
      <h3 class="faq-title">
        What do you call someone with no body and no nose?
      </h3>
      <p class="faq-text">
        Nobody knows.
      </p>
      <button class="faq-toggle">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="faq">
      <h3 class="faq-title">
        What's the object-oriented way to become wealthy?
      </h3>
      <p class="faq-text">
        Inheritance.
      </p>
      <button class="faq-toggle">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="faq">
      <h3 class="faq-title">
        How many tickles does it take to tickle an octopus?
      </h3>
      <p class="faq-text">
        Ten-tickles!
      </p>
      <button class="faq-toggle">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="faq">
      <h3 class="faq-title">
        What is: 1 + 1?
      </h3>
      <p class="faq-text">
        Depends on who are you asking.
      </p>
      <button class="faq-toggle">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-times"></i>
      </button>
    </div>
  </div>
  <script src="./script.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Here's My Css code

@import url("https://fonts.googleapis.com/css?family=Ubuntu&display=swap");

* {
  box-sizing: border-box;
}

body {
  font-family: "Ubuntu", sans-serif;
  background-color: #f0f0f0;
}

h1 {
  margin: 50px 0 30px;
  text-align: center;
}

.faq-container {
  max-width: 600px;
  margin: 0 auto;
}

.faq {
  background-color: transparent;
  border: 1px solid #9fa4a8;
  border-radius: 10px;
  margin: 20px 0;
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease;
}

.faq.active {
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.faq.active::before,
.faq.active::after {
  content: "\f075";
  font-family: "Font Awesome 5 Free";
  color: #2ecc71;
  font-size: 7rem;
  position: absolute;
  opacity: 0.2;
  top: 20px;
  left: 20px;
  z-index: 0;
}

.faq.active::before {
  color: #3498db;
  top: -10px;
  left: -30px;
  transform: rotateY(180deg);
}

.faq-title {
  margin: 0 35px 0 0;
}

.faq-text {
  display: none;
  margin: 30px 0 0;
}

.faq.active .faq-text {
  display: block;
}

.faq-toggle {
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
  position: absolute;
  top: 30px;
  right: 30px;
  height: 30px;
  width: 30px;
}

.faq-toggle:focus {
  outline: 0;
}

.faq-toggle .fa-times {
  display: none;
}

.faq.active .faq-toggle .fa-times {
  color: #fff;
  display: block;
}

.faq.active .faq-toggle .fa-chevron-down {
  display: none;
}

.faq.active .faq-toggle {
  background-color: #9fa4a8;
}
Enter fullscreen mode Exit fullscreen mode

Here's My JavaScript code

const toggles = document.querySelectorAll(".faq-toggle");

toggles.forEach((toggle) => {
  toggle.addEventListener("click", () => {
    toggle.parentNode.classList.toggle("active");
  });
});
Enter fullscreen mode Exit fullscreen mode

Here's ouput

Top comments (12)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Great job!

Now go read about <summary> and <details> and realise it is even easier than you thought!

See if you can create the same with native HTML elements as you won’t need any JavaScript and it will be accessible for people with disabilities too (as at the moment your example isn’t).

Nice design, Keep going 💪

Collapse
 
w3tsa profile image
Coding Jitsu

keep in mind, details are not supported in IE, if you want to support IE, that is.

Collapse
 
grahamthedev profile image
GrahamTheDev

Yes quite right I should have said that. To be fair they do fall back quite gracefully but even so great point! ❤️

Collapse
 
aydoubleyou profile image
Alex Winter

OP's work is accessible. It could benefit from some visible focus styling though.

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

The button has no text that a screen reader can access, it is missing relevant aria attributes, it is positioned after the section that expands in the DOM so the read order is incorrect etc. And those are things I can spot on a phone without actually testing it.

It certainly is not accessible in its current format.

I didn’t want to list the accessibility issues as OP is doing well and I didn’t want to put them off but I thought I better point them out if you think that is an accessible pattern as I wouldn’t want you using it in production.

Hence why I suggest summary and details as you don’t need to know all of the ARIA etc

Collapse
 
kallmanation profile image
Nathan Kallman • Edited
Collapse
 
knoj profile image
knoj

This is directly from a Udemy course geared toward learning JS & CSS. It was a great course, and OP should have referenced the training.
OP presents this code as if it were their own.

Collapse
 
drsimplegraffiti profile image
Abayomi Ogunnusi

Great job....

Collapse
 
ahtshamajus profile image
Ahtsham Ajus

ThnkQ 🥰

Collapse
 
pythonvishal profile image
Vishal Chopra

Well done. A FAQ is extremely helpful for optimizing SEO content. It'll be more engaging if it has animation effects.

Collapse
 
heyprotagonist profile image
Anguram Shanmugam

Also learn to spell title right!

Collapse
 
ahtshamajus profile image
Ahtsham Ajus

Sure sir