Link to home
Start Free TrialLog in
Avatar of MacLean Fitzgerald
MacLean FitzgeraldFlag for United States of America

asked on

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

Avatar of hielo
hielo
Flag of Wallis and Futuna image

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

Avatar of MacLean Fitzgerald

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial