FAQ accordion

Developer
Tyler Fowle
Size
2,155 Kb
Views
42,504
  1. FAQ accordion Previews
  2. FAQ accordion HTML Codes
  3. FAQ accordion CSS Codes

How do I make an faq accordion?

Here is my go at a FAQ accordion! let me know what you think! comment, love, fork. What is a faq accordion? How do you make a faq accordion? This script and codes were developed by Tyler Fowle on 22 July 2022, Friday.

FAQ accordion Previews
IQ Test

FAQ accordion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FAQ accordion</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='centerplease'> FAQ accordion
</div>
<br>
<div class="content">
<div> <input type="checkbox" id="question1" name="q" class="questions"> <div class="plus">+</div> <label for="question1" class="question"> This is the question that will be asked? </label> <div class="answers"> What if the answer is really long and wraps the whole page and you never want to finish it but you have to because its the answer! </div>
</div>
<div> <input type="checkbox" id="question2" name="q" class="questions"> <div class="plus">+</div> <label for="question2" class="question"> Short? </label> <div class="answers"> short! </div>
</div>
<div> <input type="checkbox" id="question3" name="q" class="questions"> <div class="plus">+</div> <label for="question3" class="question"> But what if the question is really long and wraps the whole page and you feel like you will never finish reading the question? </label> <div class="answers"> This is the answer! </div>
</div>
</div>
</body>
</html>

FAQ accordion - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,800);
body { font-family: 'Open Sans'; font-size: 1.5em; background: #eee;
}
.content { width: 80%; padding: 20px; margin: 0 auto; padding: 0 60px 0 0;
}
.centerplease { margin: 0 auto; max-width: 270px; font-size: 40px;
}
.question { position: relative; background: #8FBC8F; margin: 0; padding: 10px 10px 10px 50px; display: block; width:100%; cursor: pointer;
}
.answers { background: #999; padding: 0px 15px; margin: 5px 0; height: 0; overflow: hidden; z-index: -1; position: relative; opacity: 0; -webkit-transition: .7s ease; -moz-transition: .7s ease; -o-transition: .7s ease; transition: .7s ease;
}
.questions:checked ~ .answers{ height: auto; opacity: 1; padding: 15px;
}
.plus { position: absolute; margin-left: 10px; z-index: 5; font-size: 2em; line-height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease;
}
.questions:checked ~ .plus { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.questions { display: none;
}
FAQ accordion - Script Codes
FAQ accordion - Script Codes
Home Page Home
Developer Tyler Fowle
Username tylerfowle
Uploaded July 22, 2022
Rating 4
Size 2,155 Kb
Views 42,504
Do you need developer help for FAQ accordion?

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!

Tyler Fowle (tylerfowle) Script Codes
Name
Flexbox Slider
Peeking Panels
Icon nav with flip out description
Youtube Lightbox
Such Testimonial Bubble
No-Scroll Google Map
One Page Scroller
Hidden Header And Footer
Pure CSS Slider
Design Idea
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!