FAQ Collapse/Expand List

Developer
Mia Sno
Size
2,509 Kb
Views
62,744
  1. FAQ Collapse/Expand List Previews
  2. FAQ Collapse/Expand List HTML Codes
  3. FAQ Collapse/Expand List CSS Codes
  4. FAQ Collapse/Expand List JS Codes

How do I make an faq collapse/expand list?

Uses FontAwesome for +- and jquery to expand/collapse Answers. In this case when expanding one answer any open answers will collapse, so you can't have two answers open at the same time.. What is a faq collapse/expand list? How do you make a faq collapse/expand list? This script and codes were developed by Mia Sno on 22 July 2022, Friday.

FAQ Collapse/Expand List Previews
IQ Test

FAQ Collapse/Expand List - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FAQ Collapse/Expand List</title> <link href="//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#" class="togglefaq"><i class="icon-plus"></i> How do you tell an introverted computer scientist from an extroverted computer scientist?</a> <div class="faqanswer"> <p>An extroverted computer scientist looks at <em>your</em> shoes when he talks to you.
</p> </div> <a href="#" class="togglefaq"><i class="icon-plus"></i> How many programmers does it take to change a light bulb?</a> <div class="faqanswer"> <p>None, that's a hardware problem.
</p> </div> <a href="#" class="togglefaq"><i class="icon-plus"></i> What's the object-oriented way to become wealthy?</a> <div class="faqanswer"> <p>Inheritance.
</p> </div> <a href="#" class="togglefaq"><i class="icon-plus"></i> Why do programmers like UNIX?</a> <div class="faqanswer"> <p>unzip, strip, touch, finger, grep, mount, fsck, more, yes, fsck, fsck, fsck, umount, sleep
</p> </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>

FAQ Collapse/Expand List - Script Codes CSS Codes

/* FAQ COLLAPSE/EXPAND STYLES */
* { box-sizing: border-box;
}
.faqanswer {	display: none;	width: 590px;	background: #e5e5e5;	padding: 12px 20px 0 30px;
}
.faqanswer p {	font-size: 13px;	line-height: 17px;
}
a.active {	font-weight: bold;
}
.togglefaq {	text-decoration: none;	color: #333;	font-size: 13px;	padding: 10px 30px;	line-height: 20px;	display: block;	border: 1px solid #d0d0d0;	width: 590px;	margin-bottom: -1px;
}
.icon-plus {	color: #5ec4cd;	margin-right: 20px;	font-size: 20px;	float:left;
}
.icon-minus {	color: #5ec4cd;	margin-right: 20px;	font-size: 20px;	float:left;
}
p { margin: 0; padding-bottom: 20px;
}

FAQ Collapse/Expand List - Script Codes JS Codes

//faq toggle stuff
$('.togglefaq').click(function(e) {
e.preventDefault();
var notthis = $('.active').not(this);
notthis.find('.icon-minus').addClass('icon-plus').removeClass('icon-minus');
notthis.toggleClass('active').next('.faqanswer').slideToggle(300); $(this).toggleClass('active').next().slideToggle("fast");
$(this).children('i').toggleClass('icon-plus icon-minus');
});
FAQ Collapse/Expand List - Script Codes
FAQ Collapse/Expand List - Script Codes
Home Page Home
Developer Mia Sno
Username mrs_snow
Uploaded July 22, 2022
Rating 3.5
Size 2,509 Kb
Views 62,744
Do you need developer help for FAQ Collapse/Expand List?

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!

Mia Sno (mrs_snow) Script Codes
Name
Placeholder sample for IE
Smooth Scroll To Anchor With jQuery
Sample fancybox 2 overlay with no wrapper and custom close
Toggle graph phases with menu of phases
Img Swap on hover or mouseover with JQuery
Add id to body tag based on url jQuery
QA list with content property
Print element on a page
Sticky Navigation or Section with jQuery
Create amazing love letters 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!