In the world of web design, there is always a need for methods that capture users’ attention while organizing information clearly. The FAQ section is a great example of this.
In this article, we introduce how to create an FAQ section where questions and answers are neatly organized and interactively displayed using CSS (arrows) and jQuery (slideToggle, toggleClass).

Contents
  1. Designing Arrow Icons with CSS
  2. HTML Structure for the Question and Answer Areas
  3. Adding Interactive Behavior with jQuery: JavaScript Code
  4. Demo Page: CSS Arrow Animation and Answer Area Toggle Using slideToggle and toggleClass
  5. Summary

Designing Arrow Icons with CSS

First, let’s design arrow icons with CSS so users can visually understand the FAQ section. Here, the arrow is displayed next to the question, and when clicked, the answer appears. The arrow design and its animated behavior help attract user interest.

Below is the CSS for the down arrow (.qa .arrow::before), up arrow (.qa .arrow.active::before), the question area (.qa ul li), and the answer area corresponding to the question (.qa ul li:last-child).

<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0;
  line-height: 1.8em;
}
.qa{
  width: 24%;
  margin: 0 auto 16px auto;
  position: relative;
}
.qa ul{
  width: 100%;
}
.qa ul li{
  width: 100%;
  font-size: 16px;
  padding: 10px 0;
  font-weight: bold;
  line-height: 1.8em;
  list-style: none;
  color: #007FFF;
  text-align: left;
}
.qa ul li:last-child{
  display: none;
  color: #FF0000;
}
.qa .arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  z-index: 2;
  cursor: pointer;
  border-radius: 40px;
  border: solid 2px #FF0000;
  box-sizing: border-box;
}
.qa .arrow::before {
  border: solid #FF0000;
  border-width: 0 0 2px 2px;
  content: "";
  margin: auto;
  position: absolute;
  left: 11px;
  top: 8px;
  transform: rotate(-45deg);
  transition: .2s;
  width: 12px;
  height: 12px;
}
.qa .arrow.active {
  border-color: #007FFF;
}
.qa .arrow.active::before {
  top: 14px;
  border-color: #007FFF;
  transform: rotate(135deg);
  transition: .2s;
}
</style>

HTML Structure for the Question and Answer Areas

Next, we create the structure for questions and answers using HTML. Use heading tags to clearly define sections, and list tags to organize questions and answers. Place the HTML elements so they work in conjunction with the arrow icon.

We have prepared an answer area (.qa ul li:last-child) and an arrow area (.arrow) corresponding to the question area (.qa ul li).

<h1>
Using slideToggle and toggleClass to animate the CSS arrow up and down<br>
and to show/hide the answer area for each question.<br>
Please click the icon at the bottom right.
</h1>

<div class="qa">
  <div class="arrow"></div>
  <ul>
    <li>
      Write the question title here.
    </li>
    <li>
      Write the answer text for the question here.<br>
      Write the answer text for the question here.<br>
      Write the answer text for the question here.<br>
      Write the answer text for the question here.<br>
      Write the answer text for the question here.<br>
      Write the answer text for the question here.
    </li>
  </ul>
</div>

Adding Interactive Behavior with jQuery: JavaScript Code

Load the jquery-3.7.1.min.js file. When the arrow (.qa .arrow) is clicked, slideToggle and toggleClass are used to toggle the display of the target area.

The key point here is the interaction that switches the visibility of the question and answer areas using jQuery. By using the .slideToggle and .toggleClass methods, information is displayed with smooth animations when the user clicks the arrow.

<script src="jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $(".qa .arrow").on("click", function () {
    $(this).next("ul").children("li:last-child").slideToggle(300);
    $(this).toggleClass("active", 300);
  });
});
</script>

Demo Page: CSS Arrow Animation and Answer Area Toggle Using slideToggle and toggleClass

To see the actual code and its effects, we have prepared a demo page. Through the demo below, you can experience how it works in practice and apply it to your own projects.

Demo page for CSS arrow animation and answer area toggle using slideToggle and toggleClass

Summary

An interactive FAQ section is an essential page element for improving the user experience on a website. By making full use of CSS and jQuery, you can create an attractive and user-friendly FAQ page. We hope this article helps you achieve that.

* Please use this code at your own responsibility if you reuse it.
* Do not reuse the Google Analytics tag included in the head tag of the demo page.

CSS Arrow slideToggle toggleClass