Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
FAQ Page with Show and Hide Questions and Answers. Showing First Question Answer on Page Load.
<!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

This comment has been minimized.

Copy link

@Carter955 Carter955 commented Apr 20, 2021

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