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> |
This comment has been minimized.
This comment has been minimized.
dasdasdsadsd |
This comment has been minimized.
This comment has been minimized.
daSDSADSAD |
This comment has been minimized.
This comment has been minimized.
SSDASDSD |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
I just need the ccs styles |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Is there a way to make the first selected question close when the next question is selected?