Helping a friend on a website, I was asked to code a classic FAQ on a WordPress website. I thought WordPress would provide such basic features, but my friend was using a very cheap plan on wordpress.com, so she was stuck. I had to go back to the basics and create an FAQ using basic CSS HTML and JavaScript.
For the record, it turned out that it didn’t work on the website, because the JavaScript was blocked somehow. I guess using a cheap plan on wordpress.com has its downsides (use only WordPress.org).
FAQ HTML code
First, let us start with the HTML, the easiest part.
We will start with a parent <div> container.
Inside the container, we will have two children: a title <h2> and a <div> faq.
In the faq <div> we will have a succession of divs faq-item.
Each <div> faq-item will contain a link <a> with the question, and a <div> answer with a <p>.
<div class="container">
<h2 class="title">Code an FAQ with HTML and CSS</h2>
<div class="faq">
<div class="faq-item">
<a class="faq-question">Why should we use JavaScript?</a>
<div class="faq-answer">
<p>We need to use Javascript to add dynamic to the code. Without it, we can't show and hide elements. HTML and CSS alone are static.</p>
</div>
</div>
<div class="faq-item">
<a class="faq-question">Why would we need an FAQ?</a>
<div class="faq-answer">
<p>Depending on the type of website you handle, you might need an FAQ. Try to take note of all the questions you get asked multiple times, and create an FAQ to answer them. This will save you some time in the future hopefully.</p>
</div>
</div>
<div class="faq-item">
<a class="faq-question">Why should I share this tutorial?</a>
<div class="faq-answer">
<p>It would be amazing if you could share this tutorial, it took me some time to work on it and make it look nice and efficient. I wish it can help people through the process of creating a simple FAQ.</p>
</div>
</div>
<div class="faq-item">
<a class="faq-question">Can I change the style of this FAQ?</a>
<div class="faq-answer">
<p>Of course. I applied basic CSS to make the FAQ look nice, simple, and match my website look. You can change the colors, the icons, the effects on hover etc...</p>
</div>
</div>
</div>
FAQ CSS code
The trickiest part of this tutorial is the CSS.
I’m not sure that I’ll be able to explain this part clearly. So try to play with the code to understand it first. Then modify it to match the style of FAQ you need.
.container {
margin: 0 auto;
padding: 40px;
width: 700px;
}
.faq-question {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
padding: 10px 30px 10px 10px;
font-size: 18px;
font-weight: 400;
border-bottom: 1px solid;
line-height: 30px;
}
.faq-question:hover,
.faq-question:hover::after {
cursor: pointer;
font-weight: bold;
}
.faq-question.active {
border-bottom: 3px solid;
font-weight: bold;
}
.faq-question::after {
content: '+';
position: absolute;
float: right;
right: 1rem;
font-size: 30px;
width: 30px;
height: 30px;
text-align: center;
}
.faq-question.active::after {
content: '-';
}
.faq-answer {
opacity: 0;
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: all 0.2s ease 0.15s;
}
.faq-answer.active {
opacity: 1;
padding: 20px;
max-height: 100%;
transition: all 0.35s ease 0.15s;
}
FAQ JavaScript code
The javascript is quite easy here.
We need to identify the question area, it’s the area where the user is going to click, expecting to display the answer.
We will create a function toggleAccordion that will toggle the class active to the question and to the second element, which is the answer.
Finally, we will declare an event listener on the item, on the click event. Every time the user clicks on an item, we will call toggleAccordion on it.
const items = document.querySelectorAll(".faq-question");
function toggleAccordion(){
this.classList.toggle('active');
this.nextElementSibling.classList.toggle('active');
}
items.forEach(item => item.addEventListener('click', toggleAccordion));
Now put all this code together and play with it. See the outcome below.
DEMO !
Code an FAQ with HTML and CSS
We need to use Javascript to add dynamic to the code. Without it, we can't show and hide elements. HTML and CSS alone are static.
Depending on the type of website you handle, you might need an FAQ. Try to take note of all the questions you get asked multiple times, and create an FAQ to answer them. This will save you some time in the future hopefully.
It would be amazing if you could share this tutorial, it took me some time to work on it and make it look nice and efficient. I wish it can help people through the process of creating a simple FAQ.
Of course. I applied basic CSS to make the FAQ look nice, simple, and match my website look. You can change the colors, the icons, the effects on hover etc...
You can add icons on the right side, instead of + and -. You can also play with the colors, the animations, etc…
Hope I could help.
Tools I use for this site
- I buy all my domain names on Namecheap, as thetrendycoder.com
- The hosting of this website is made on Bluehost.
- The website is created with WordPress.org (and not WordPress.com).
- I use the page builder Elementor because it makes it easy to create modern pages with drag and drop.
- I have multiple websites, and on most of them, I use themes from wpKoi. I love their design, they are very original and work well with Elementor.
- All the designs and images are created using canvas.
- I use Grammarly and languagetool to correct all my spelling and grammar mistakes.
- SEO is a big thing on a website, I use a WordPress plugin called YoastSEO to help me with the basic analysis. I also use a tool called Keysearch for choosing the right keywords.
- To handle affiliate links, I use two platforms: impact and ShareASale.
You want to write on TheTrendyCoder ?
If you are interested in publishing guest articles on this website, sharing your experience or coding tutorials, apply through this form.
NO EXPERIENCE needed!
NO PERFECT English needed!
NO DEGREE needed!
NO AGE limits!
No matter at what stage we are in our tech journey, we all have learned things and experienced things. Sharing them can help others and even help us. So, if you are a student, a professional, or a self-taught coder, feel at home and share some of your knowledge with the community.
1 thought on “Tutorial: code your own FAQ with CSS HTML JavaScript”
Comments are closed.