Simple FAQ Section using HTML, CSS & JavaScript

Simple FAQ Section using HTML, CSS & JavaScript

Simple FAQ Section using HTML, CSS & JavaScript

In this article, I have shown you how to create a Simple FAQ Section using HTML CSS, and JavaScript. Earlier I shared with you the design of many more types of FAQ Accordion Section. This design has been created by Jquery. 

Here HTML and CSS are used for design and JQuery for implementation. The jQuery used here is absolutely simple you will understand very easily. HTML FAQ Section We see on different websites. 

We see this type of Accordion Section for many types of business, service, personal websites. Where some common questions and answers about the service or product are given in advance. So that it is not difficult to know the necessary information of the customer or user. 

FAQ Accordion HTML CSS

The design I have used here is absolutely responsive and ready. You can use it directly on your website. It is made of finished color flowers which further enhances the beauty. 

Four headings have been used here and information about it has been used. Which used HTML CSS to design and JQuery to implement. Below I have given a live preview that will help you to know how this FAQ Accordion Section works.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, this is a simple FAQ section that has four headings. There is a lot more information in those four headings. You can add many more headings of your choice here if you want. 

The background color of the headings in blue. When you click on it, an area will be created below it where more information can be found.

How to Create FAQ Accordion Section

To create this JavaScript FAQ Section you need to have a basic idea about HTML CSS and JavaScript. First, you create an HTML and CSS file. Even if you don’t create a javascript file here. You can add those JavaScript directly to the HTML file. 

I have not shared any tutorial here. I have already shared many such tutorials. So here I have just given the source code which you will copy and use in your work.

HTML Code ( index.html ):

The following code is the HTML code used to create this FAQ Section HTML CSS. Contains all types of text and information. You copy them directly and add them to your HTML file. Four headings and their information have been added here.

<!DOCTYPE html>
<html lang=“en”>
<head>
  <meta charset=“UTF-8”>
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
  <title>Document</title>
  <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>
  <link href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” rel=“stylesheet”>
  <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js” charset=“utf-8”></script>
  <!– CSS file –>
  <link rel=“stylesheet” href=“style.css”>
</head>
<body>
   <section id=“faq”>
    <div class=“container faq”>
      <div class=“container”>
        <div class=“row”>
          <div class=“col-sm-12”>
            <div class=“accordions”>
              <!– 1st accordion menu –>
              <div class=“accordion-item”>
                <div class=“accordion-title” data-tab=“item4”>
                  <h3>Free DDOS Protection <i class=“fa fa-chevron-down”></i></h3>
                </div>
                <div class=“accordion-content” id=“item4”>
                  <p>
                    Unlike other providers who charge extra for DDoS protection, All of our VPS
                    servers comes
                  </p>
                </div>
              </div>
              <!– 2nd accordion menu –>
              <div class=“accordion-item”>
                <div class=“accordion-title” data-tab=“item2”>
                  <h3>What is Windows VPS? <i class=“fa fa-chevron-down”></i></h3>
                </div>
                <div class=“accordion-content” id=“item2”>
                  <p>
                    With a Windows VPS server, you will get a Remote Desktop connection within a few
                    minutes. You can run Windows applications such as IIS, SQL, Microsoft Exchange
                    or any software like Docking,
                  </p>
                </div>
              </div>
              <!– 3rd accordion menu –>
              <div class=“accordion-item”>
                <div class=“accordion-title” data-tab=“item3”>
                  <h3>Payment Options <i class=“fa fa-chevron-down”></i></h3>
                </div>
                <div class=“accordion-content” id=“item3”>
                  <p>
                    Unlike most other providers you don’t have to pay with just Credit Card or
                    PayPal. You can also
                  </p>
                </div>
              </div>
              <!– 4th accordion menu –>
              <div class=“accordion-item”>
                <div class=“accordion-title” data-tab=“item1”>
                  <h3>Why FutureRDP? <i class=“fa fa-chevron-down”></i></h3>
                </div>
                <div class=“accordion-content” id=“item1”>
                  <p>
                    Germany, Netherlands, and Canada. We have a range
                    of different solutions for different purposes such as SSD VPS and Storage
                    servers. All servers are equipped with RAID10 only SSD drives and FREE DDoS
                    Protection!
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!– JavaScript–>
  <!–
    <script>
      Add javascript code
    </script>  
  –>
</body>
</html>

CSS Code ( style.css ):

The following codes are the CSS codes used to design it. Above we have added all the information using HTML code. Now all this information has been designed by CSS code. 

You copy the code and add it to your CSS file. Rename your CSS file to style.css. I have already attached the CSS file to the HTML file.

(more…)

Continue ReadingSimple FAQ Section using HTML, CSS & JavaScript
Skeleton Loading Animation using HTML & CSS

Skeleton Loading Animation using HTML & CSS

Skeleton Loading Animation using HTML & CSS

In this article, you will learn how to create Skeleton Loading Animation using HTML and CSS. Already shared a tutorial on creating a working skeleton loader using JavaScript. Now is the time to create Skeleton Loading Animation CSS.

The design I made earlier was completely functional, meaning the content could be seen after a short loading animation. However, in the case of this design, it will not be the only animation that will continue here. This will help beginners understand how skeleton CSS animation works. 

If you want to make it work with JavaScript you can follow the previous tutorial. The CSS Skeleton Loading animation created here was originally created on a profile card.

Skeleton Loading Animation CSS

You must have seen different types of websites where such animations on elements or content can be seen during internet slowdown. For example, in the case of websites like YouTube, Facebook, etc., you will see this type of screen loading animation when the internet speed is low. 

Which satisfies some of the users and enhances the beauty of the website. Below I have given a demo that will help you to know how this design works. 

See the Pen
Skeleton Loading Animation CSS by Foolish Developer (@foolishdevweb)
on CodePen.

The demo above has helped you to know how this loading animation works. As you can see, a web page is painted blue. Then a box was made. HTML and CSS have been used to make it much easier. 

We created its basic structure with the help of HTML and designed it with the help of CSS. Since it was not implemented, no JavaScript was used.

How to Create Skeleton Screen Loading Animation

This box is basically a profile card that first contains a small profile image space. Then there is the place to give the name and then some basic information. After all, there is a place to put icons on some social media. Skeleton Loading Animation CSS has been added to these places. This animation will continue for 2 seconds.

Now it’s time to use HTML and CSS to create it. This requires you to have a basic idea about HTML and CSS. If you only want the source code, you can use the download button below the article.

Step 1: The basic structure of this effect (more…)

Continue ReadingSkeleton Loading Animation using HTML & CSS