FAQ

In this example below you will see how to do a FAQ with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by vierageorge, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright vierageorge ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>FAQ</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <main>
  <h1>Frequently Asked Questions</h1>
  <input type="text" class="live-search-box" placeholder="Búsqueda" />
  <div class="topic">

    <div class="open">

      <h2 class="question">1. How can i delete my complaint/comment?<span class="ptag">SIEBEL</span></h2>
      <span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">2. I have posted a complaint/comment, but it doesn’t appear on the website. Why? When my complaint will be posted?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">3. How can I edit a complaint I posted?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">4. How can i find out personal information of another user?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">5. How can i contact another user?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">2. I have posted a complaint/comment, but it doesn’t appear on the website. Why? When my complaint will be posted?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">3. How can I edit a complaint I posted?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">4. How can i find out personal information of another user?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">5. How can i contact another user?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</main>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/vierageorge/faq-pbedXm */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
body {
  font-family: 'Roboto', sans-serif;
  background-color: #f5f5f5;
  color: #444;
}

main {
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: 30px;
  width: 100%;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 50px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.live-search-box {
  width: 100%;
  display: block;
  padding: 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #3498db;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

h1 {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 32px;
  font-weight: 300;
}

.topic {
  padding: 20px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-bottom: solid 1px #ebebeb;
}

.open {
  cursor: pointer;
  display: block;
  padding: 0px;
}

.open:hover {
  opacity: 0.7;
}

.expanded {
  background-color: #f5f5f5;
  transition: all .3s ease-in-out;
}

.ptag {
  display: none;
}

.question {
  padding-top: 30px;
  padding-right: 40px;
  padding-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  color: #526ee4;
}

.answer {
  font-size: 16px;
  line-height: 26px;
  display: none;
  margin-bottom: 30px;
  text-align: justify;
  padding-left: 20px;
  padding-right: 20px;
}

.faq-t {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  display: inline-block;
  float: right;
  position: relative;
  top: -55px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: transparent;
  border-left: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  transition: all .3s ease-in-out;
}

.faq-o {
  top: -50px;
  -moz-transform: rotate(-224deg);
  -ms-transform: rotate(-224deg);
  -webkit-transform: rotate(-224deg);
  transform: rotate(-224deg);
}

@media only screen and (max-width: 480px) {
  .faq-t {
    display: none;
  }
  .question {
    padding-right: 0px;
  }
  main {
    padding: 10px;
  }
  .answer {
    margin-bottom: 30px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

/*Downloaded from https://www.codeseek.co/vierageorge/faq-pbedXm */
$(".open").click(function() {
  var container = $(this).parents(".topic");
  var answer = container.find(".answer");
  var trigger = container.find(".faq-t");

  answer.slideToggle(200);

  if (trigger.hasClass("faq-o")) {
    trigger.removeClass("faq-o");
  } else {
    trigger.addClass("faq-o");
  }

  if (container.hasClass("expanded")) {
    container.removeClass("expanded");
  } else {
    container.addClass("expanded");
  }
});

jQuery(document).ready(function($) {
  $('.question').each(function() {
    $(this).attr('data-search-term', $(this).text().toLowerCase() + $(this).find("ptag").text().toLowerCase());

  });

  $('.live-search-box').on('keyup', function() {

    var searchTerm = $(this).val().toLowerCase();

    $('.question').each(function() {

      if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
        $(this).parent().parent().show();
      } else {
        $(this).parent().parent().hide();
      }

    });

  });

});

Comments