Today we will learn how to make the “Frequently asked questions” section using Html, CSS and JavaScript. In the last post, we created a Quiz application system using Html, CSS, and JavaScript. But now let’s see how to create a frequently asked question section.
The theme of the Frequently asked questions section:
This section is mainly used on websites. It is used below the services of the website. Any website which is selling something online (products, courses, etc) uses it. It is used for providing the surety that people often ask these questions and the reply to these questions is here. It helps the users to get enough knowledge about that particular service.
So, we have also created it using Html, CSS, and js. If you will follow the below steps then you will also create it.
It has a simple background. At the top, it has the text “ Frequently Asked Questions” which is the heading. Below it has the section of questions. It has five questions. Every question is placed in a box and it has also round edges due to radius. I the box left side we have the questions. On the right side, we have a button that indicates that it will open downward by clicking on it.
By clicking on this button it will open the answer to the question. It showed the answer and question in that box and the background color is also changed. Now it has a button that indicates that it will close the answer after clicking. We can open all the questions at a time. So it was a short introduction to this post. Let’s see how to create it.
You might like it:
How to create a Frequently asked questions section?
We can simply create it using Html, CSS, and javascript. For that, we have to create three main files for creating it.
Source code of Html File:
Let’s start with the Html file. Create a file of HTML and name it questions.html. Html will help us to write the content of this section. All the question answers will be written with the help of Html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <title>FAQ | Fantacy Designs</title> </head> <body> <h1>Frequently Asked Questions</h1> <div class="faq-container"> <div class="faq active"> <h3 class="faq-title"> Is FantacyDesigns provide Free design? </h3> <p class="faq-text"> Yes it's totally free. </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"> Is fantacy Provide Code? </h3> <p class="faq-text"> Yes We Provide. </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 mission of FantacyDesigns? </h3> <p class="faq-text"> Provide free templates. </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"> Is we Provide free courses? </h3> <p class="faq-text"> NO. notNow. </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> |
Source code of CSS file:
Now create a file of CSS. Create a file of CSS and name it as uestions.css and save it in the same folder. CSS is used for designing any project like how to place the content and where to place the content. How to give it proper design and make it responsive across all the devices. So, copy this code and paste It into your file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { font-family: 'Muli', sans-serif; background-color: #f0f0f0; background-image: linear-gradient(to right, #ed4264 , #ffedbc ); } h1 { margin: 50px 0 30px; text-align: center; color: #fff; } .faq-container { max-width: 600px; margin: 0 auto; border: none; } .faq { background-color: transparent; border-radius: 10px; margin: 20px 0; padding: 30px; position: relative; overflow: hidden; transition: 0.3s ease; box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; } .faq.active { background-color: #fff; box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; background-image: linear-gradient(to right, #fff , #ddd ); } .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 { color: #fff; margin: 0 35px 0 0; } .faq.active .faq-title{ color: #262626; font-family: 30px; } .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; color: #fff; } .faq-toggle:focus { outline: 0; color: #fff; } .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; } |
Source code of Javascript file:
save it in the same folder. It will help to add functionality to our project. Like adding on-click functionality in the buttons. We have two buttons and the functionality is used with the help of javascript. Copy this below code and paste it into your file.
|
1 2 3 4 5 6 7 |
const toggles = document.querySelectorAll('.faq-toggle') toggles.forEach(toggle => { toggle.addEventListener('click', () => { toggle.parentNode.classList.toggle('active') }) }) |
Therefore, you can create this section with the help of Html, CSS, and javascript. If you are unable to create then we have a solution for it. We have created a zip file that contains all these files of Html, CSS, and javascript. Its link is present below. Click on the download button and download your source code. Then you have to extract all these files and run the main file.
If you find it helpful then like this post, share it and comment below.
Thanks for reading this article.
