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

a204801Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

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

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

a204801Author Commented:
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.
hieloCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.