Basic FAQ

Developer
Dave Alger
Size
2,365 Kb
Views
72,864
  1. Basic FAQ Previews
  2. Basic FAQ HTML Codes
  3. Basic FAQ CSS Codes
  4. Basic FAQ JS Codes

How do I make an basic faq?

A clean, simple and elegant list of frequently asked questions with answers that expand and collapse.. What is a basic faq? How do you make a basic faq? This script and codes were developed by Dave Alger on 22 July 2022, Friday.

Basic FAQ Previews
IQ Test

Basic FAQ - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic FAQ</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="faq-header">Frequently Asked Questions</div>
<div class="faq-c"> <div class="faq-q"><span class="faq-t">+</span>What is the meaning of life?</div> <div class="faq-a"> <p>42</p> </div>
</div>
<div class="faq-c"> <div class="faq-q"><span class="faq-t">+</span>How much wood would a woodchuck chuck?</div> <div class="faq-a"> <p>A woodchuck would chuck all the wood he could chuck, if a woodchuck could chuck wood!</p> </div>
</div>
<div class="faq-c"> <div class="faq-q"><span class="faq-t">+</span>What happens if Pinocchio says, "my nose will grow now"</div> <div class="faq-a"> <p>Certain questions are better left &nbsp; <a href="https://en.wikipedia.org/wiki/The_Unanswered_Question">unanswered</a></p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Basic FAQ - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Raleway);
body { color: #333; background: #eee; font-family: 'Raleway', sans-serif; font-size: 1em; overflow-x: hidden; padding: 0 1.5em;
}
.faq-header{ font-size: 2em; border-bottom: 1px dotted #ccc; padding: 1em 0;
}
.faq-c { border-bottom: 1px dotted #ccc; padding: 1em 0;
}
.faq-t { line-height: 1em; color: #aaa; font-family: sans-serif; float:left; font-weight: 700; padding-right: 0.3em; -webkit-transition: all 200ms; -moz-transition: all 200ms; transition: all 200ms;
}
.faq-o { transform: rotate(-45deg); transform-origin: 50% 50%; -ms-transform: rotate(-45deg); -ms-transform-origin: 50% 50%; -webkit-transform: rotate(-45deg); -webkit-transform-origin: 50% 50%; -webkit-transition: all 200ms; -moz-transition: all 200ms; transition: all 200ms;
}
.faq-q { cursor: pointer; font-size: 1.5em; font-weight: 100;
}
.faq-a { clear: both; color: #666; display: none; padding-left: 1.5em;
}

Basic FAQ - Script Codes JS Codes

$(".faq-q").click( function () { var container = $(this).parents(".faq-c"); var answer = container.find(".faq-a"); var trigger = container.find(".faq-t"); answer.slideToggle(200); if (trigger.hasClass("faq-o")) { trigger.removeClass("faq-o"); } else { trigger.addClass("faq-o"); }
});
Basic FAQ - Script Codes
Basic FAQ - Script Codes
Home Page Home
Developer Dave Alger
Username run-time
Uploaded July 22, 2022
Rating 4
Size 2,365 Kb
Views 72,864
Do you need developer help for Basic FAQ?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dave Alger (run-time) Script Codes
Name
03 - CSS Variables
Color Picker
JavaScript water droplet effect
Chat Room Demo
JavaScript Fingerprint
Download Speed Calculator
Phone Input Field
Easy to understand paginator
Catapult Game
ASCII Tree Logo
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!