Skip to content

Instantly share code, notes, and snippets.

@neilgee

neilgee/faq.html

Last active Apr 7, 2021
Embed
What would you like to do?
FAQ Page with Show and Hide Questions and Answers
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Create an FAQ Page with Show and Hide Questions and Answers using jQuery</title>
<!-- jQuery -->
<script type="text/javascript" src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.faq_question').click(function() {
if ($(this).parent().is('.open')){
$(this).closest('.faq').find('.faq_answer_container').animate({'height':'0'},500);
$(this).closest('.faq').removeClass('open');
}else{
var newHeight =$(this).closest('.faq').find('.faq_answer').height() +'px';
$(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},500);
$(this).closest('.faq').addClass('open');
}
});
});
</script>
<!-- CSS -->
<style>
/*FAQS*/
.faq_question {
margin: 0px;
padding: 0px 0px 5px 0px;
display: inline-block;
cursor: pointer;
font-weight: bold;
}
.faq_answer_container {
height: 0px;
overflow: hidden;
padding: 0px;
}
</style>
</head>
<body>
<!-- HTML -->
<div class="faq_container">
<div class="faq">
<div class="faq_question">Question goes here</div>
<div class="faq_answer_container">
<div class="faq_answer">Answer goes here</div>
</div>
</div>
</div>
</body>
</html>
@b2bingham

This comment has been minimized.

Copy link

@b2bingham b2bingham commented May 21, 2015

Is there a way to make the first selected question close when the next question is selected?

@dfdsafs

This comment has been minimized.

Copy link

@dfdsafs dfdsafs commented Mar 5, 2018

dasdasdsadsd

@dfdsafs

This comment has been minimized.

Copy link

@dfdsafs dfdsafs commented Mar 5, 2018

daSDSADSAD

@dfdsafs

This comment has been minimized.

Copy link

@dfdsafs dfdsafs commented Mar 5, 2018

SSDASDSD

@navnit-viradiya

This comment has been minimized.

Copy link

@navnit-viradiya navnit-viradiya commented Sep 7, 2018

Is there a way to make the first selected question close when the next question is selected?

I have updated code please check in below URL.
https://gist.github.com/navnit-viradiya/1ec2fd514d92c0d5dd9fca9d7dee6fef

@KookyPiranha

This comment has been minimized.

Copy link

@KookyPiranha KookyPiranha commented Oct 18, 2020

I just need the ccs styles

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