Last active
November 17, 2022 03:56
-
-
Save neilgee/9284745 to your computer and use it in GitHub Desktop.
FAQ Page with Show and Hide Questions and Answers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
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
I just need the ccs styles
I need this code for my blogger site ..is anyone help me Chilbach
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
SSDASDSD