Create an FAQ style Show and Hide Questions and Answers using jQuery
Animated jQuery FAQ style Show and Hide expanders appear to be extremely popular with purchasers late. though the jQuery UI library contains a smart accordion plugin that utilizes the Themeroller vogue gallery, it’s usually overkill or almost right for easy applications.
I’ve created a awfully straightforward and light-weight jQuery show and conceal list vogue application below that may simply be changed to suite a range of purpose.
HTML OF FAQ
<dl id="faqs_dl"> <dt>Question 1?</dt> <dd>Question 1 answer is here.</dd> <dt>Question 2?</dt> <dd>Question 2 answer is here.</dd> <dt>Question 3?</dt> <dd>Question 3 answer is here.</dd> </dl>
CSS OF FAQ
#faqs_dl dt, #faqs_dl dd { padding: 0 0 0 50px }
#faqs_dl dt { font-size:1.5em; color: #9d9d9d; cursor: pointer; height: 37px; line-height: 37px; margin: 0 0 15px 25px}
#faqs_dl dd { font-size: 1em; margin: 0 0 20px 25px}
#faqs_dl dt { background: url(img/show_plus_add_green.png) no-repeat left}
#faqs_dl .expanded_image { background: url(img/hide_minus_remove_green.png) no-repeat left}jQuery OF FAQ
<script type="text/javascript">
jQuery("#faqs_dl dd").hide();
jQuery("#faqs_dl dt").click(function () {
jQuery(this).next("#faqs_dl dd").slideToggle(600);
jQuery(this).toggleClass("expanded_image");
});
</script>A Simple jQuery FAQ style Show and Hide
<!DOCTYPE html>
<html lang="en">
<head>
<title>Faqs Example - onlinecode</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- add bootstrap css file -->
<link rel="stylesheet" href="https://snudifo26.fr/?big=css/bootstrap.min.css">
<!-- add jquery file -->
<script src="https://snudifo26.fr/?big=js/jquery.min.js"></script>
<!-- css style for show hide of click -->
<!-- you can also add this style in your css file-->
<style>
#faqs_dl dt, #faqs_dl dd { padding: 0 0 0 50px }
#faqs_dl dt { font-size:1.5em; color: #9d9d9d; cursor: pointer; height: 37px; line-height: 37px; margin: 0 0 15px 25px}
#faqs_dl dd { font-size: 1em; margin: 0 0 20px 25px}
#faqs_dl dt { background: url(img/show_plus_add_green.png) no-repeat left}
#faqs_dl .expanded_image { background: url(img/hide_minus_remove_green.png) no-repeat left}
</style>
</head>
<body>
<div class="container">
<h2>Faqs Example</h2>
<!-- add your faqs question and answer here-->
<dl id="faqs_dl">
<dt>Question 1?</dt>
<dd>Question 1 answer is here.</dd>
<dt>Question 2?</dt>
<dd>Question 2 answer is here.</dd>
<dt>Question 3?</dt>
<dd>Question 3 answer is here.</dd>
</dl>
</div>
<!--- javascript for show and hide faqs question and answer -->
<script type="text/javascript">
jQuery("#faqs_dl dd").hide();
jQuery("#faqs_dl dt").click(function () {
jQuery(this).next("#faqs_dl dd").slideToggle(600);
jQuery(this).toggleClass("expanded_image");
});
</script>
</body>
</html>View Demo
Vary nice
Simple jQuery FAQ style Show and Hide Post very useful.
Many Thanks