jquery animate/toggle

I have recently been playing with jquery and wanted to find the best solution for an FAQ page.

with the code I have found, it works for 1 question, but if I had 30 questions on an FAQ page they would all animate up/down at the same time. Whats the best way to edit this so I can have multiple questions that open individually onclick?

What I have been able to piece together is the following:

<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>

Open in new window

Read comments in code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
 $(document).ready(function() {

 	// this line hides all the answers upon load.  You could skip this step if you were
	// to hide it in css by adding "visibility:hidden;display:none" to ".faq_answer_container"
	// That would be my preferred way of doing it, but I am using the jQuery approach for
	// illustration purposes.
	$('.faq_answer_container').toggle();
	
     // do "something" whenever an ".faq_question" is clicked
    $('.faq_question').click(function() {
		
               //here, the "something" simply entails toggling the visibility of the "next" element
              // that follows "this".  Here, "this" refers to the ".faq_question" that was just clicked.
		$(this).next().toggle();
    });
 
});
</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>
</head>
<body>
<div class="faq_container">
  <div class="faq">
    <div class="faq_question">1. Question goes here</div>
    <div class="faq_answer_container">
      <div class="faq_answer">Answer 1 goes here</div>
    </div>
    <div class="faq_question">2. Question goes here</div>
    <div class="faq_answer_container">
      <div class="faq_answer">Answer 2 goes here</div>
    </div>
    <div class="faq_question">3. Question goes here</div>
    <div class="faq_answer_container">
      <div class="faq_answer">Answer 3 goes here</div>
    </div>
  </div>
</div>
</body>
</html>

Open in new window

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LVL 82

hieloCommented: 2015-07-07

a204801Author Commented: 2015-07-07

Functionally this works, but I was hoping to use the jquery animate. So that it had a smooth scroll effect, currently its pretty abrupt and jarring.

OK, but the key is to work on the "next()" element. You probably want:
$(this).next().animate({'height':'toggle'},1000); /* instead of $(this).next().toggle(); */

Play around with the 1000 to control the speed of the animation

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial

jquery animate/toggle

Who is Participating?