-
-
Save mayuresh-srivastava/5a97b501ba94ed9991988b6ab091adf7 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
<script type="text/javascript" src="//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').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> | |
<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> | |
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment