Skip to content

Instantly share code, notes, and snippets.

@navnit-viradiya

navnit-viradiya/faq-example.html

Created September 7, 2018 13:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save navnit-viradiya/1ec2fd514d92c0d5dd9fca9d7dee6fef to your computer and use it in GitHub Desktop.
Save navnit-viradiya/1ec2fd514d92c0d5dd9fca9d7dee6fef to your computer and use it in GitHub Desktop.
Download ZIP
FAQ Page with Show and Hide Questions and Answers. Showing First Question Answer on Page Load.
Raw
faq-example.html
<!DOCTYPE html>
<html>
<head>
<title>faq</title>
<style>
/*FAQS*/
.faq_question {
margin: 0px;
padding: 0px 0px 5px 0px;
display: inline-block;
cursor: pointer;
font-weight: bold;
}
.faq_answer_container {
display: none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
$('.faq_question').click(function() {
if ($(this).parent().is('.open')) {
$(this).closest('.faq').find('.faq_answer_container').slideUp();
$(this).closest('.faq').removeClass('open');
} else {
$('.faq_answer_container').slideUp();
$('.faq').removeClass('open');
$(this).closest('.faq').find('.faq_answer_container').slideDown();
$(this).closest('.faq').addClass('open');
}
});
});
</script>
</head>
<body>
<div class="faq_container">
<div class="faq">
<div class="faq_question open">Question goes here 1</div>
<div class="faq_answer_container" style="display: block;">
<div class="faq_answer">Answer goes here</div>
</div>
</div>
<div class="faq">
<div class="faq_question">Question goes here 2</div>
<div class="faq_answer_container">
<div class="faq_answer">Answer goes here</div>
</div>
</div>
<div class="faq">
<div class="faq_question">Question goes here 3</div>
<div class="faq_answer_container">
<div class="faq_answer">Answer goes here</div>
</div>
</div>
</div>
</body>
</html>
@Carter955
Copy link

J'ai besoin que du HTML et css

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment