title: only first FAQ element expands on click - jquery
body: <p>I'm trying to create an FAQ list. The answer displays fine on first click but I want to be able to click on another question and have that answer expand and the other close. Here's the javascript:</p>
  
  <pre><code>$(document).ready(function() {
  // hide all the answers
  $('.faq li div').hide();
  $('.faq li').click(function(){
  var question = $(this);
  var answer = $(this).find('div');
  // if the faq isn't active
  if(!$('.faq li').hasClass('active')) {
        answer.slideDown();
        $(this).siblings('div').slideUp();
        question.addClass('active');
  }
  else { 
       answer.slideUp();
       question.removeClass('active');
  }
  
   });
  
  
  
  });
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>ul.faq {
  list-style:none;
  cursor:pointer;
  z-index:1;
  
  }
  
  ul.faq li h3 {
  background:#0A5C75 url(../images/faq-inactive.png) right no-repeat;
  color:#fff;
  padding:20px 50px 20px 10px;
  margin-bottom:10px;
  border:1px solid #fff;
  }
  ul.faq li.active h3 {
  background:#0A5C75 url(../images/faq-active.png) right no-repeat;
  
  }
  ul.faq li div {
  background:#FFFFFF;
  margin:0px 10px 10px 10px;
  padding:20px;
  overflow:hidden;
  /* added fixed width to stop the jerkyness*/
  width:522px;
  position:relative;
  top:-10px;
  box-shadow: inset 0px 4px 4px 0px rgba(63, 70, 76, 0.15), 0px 4px 4px rgba(63, 70, 76, 0.15);
  }
  </code></pre>
  
  <p>and the HTML</p>
  
  <pre><code>&lt;ul class="faq"&gt;
          &lt;li&gt;
              &lt;h3&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?&lt;/a&gt;&lt;/h3&gt;
              &lt;div&gt;Vivamus rutrum arcu sit amet dolor pulvinar dictum. Etiam porttitor leo eget velit volutpat quis ultricies urna ornare. Quisque ac ultrices est. Ut lobortis malesuada justo, sed blandit sapien bibendum et. Donec vel ante eu orci pellentesque dictum. Phasellus molestie egestas du&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
               &lt;h3&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?&lt;/a&gt;&lt;/h3&gt;
               &lt;div&gt;This is the answer to question 2&lt;/div&gt;&lt;/li&gt;
           &lt;li&gt;
               &lt;h3&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?&lt;/a&gt;&lt;/h3&gt;
               &lt;div&gt;This is the answer to question 3&lt;/div&gt;
           &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>