title: Simple faq page with PHP and jQuery
body: <p>I am trying to create a faq page where questions and answers are saved in arrays. When the page is loaded the user only sees the questions and whenever he clicks on a question, the answer to that question will be shown. I found some jQuery scripts online and combined it with arrays but the result is not what I expected. </p>
  
  <p>Here is the code for the array part which is in a folder called "includes":</p>
  
  <pre><code>    &lt;?php
  
  $faqArrays=  array(
     array(
          "question" =&gt; "this is question 1",
          "answer" =&gt; "this is the answer for the first question"        
      ),
      array(
          "question" =&gt; "this is question 2",
          "answer" =&gt; "this is the answer for the 2 question"        
      ),    
      ,array(
          "question"=&gt;"this is question 7",
          "answer"=&gt;"this is the answer for the 7 question"        
      ) 
  );        
  
      ?&gt;
  </code></pre>
  
  <p>And here is the HTML and jQuery code:</p>
  
  <pre><code>&lt;?php
  
  include('includes/arrays.php');
  ?&gt;
  
  &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
   $(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');
              }
  
      });
  
  });
  &lt;/script&gt;
  &lt;style&gt;
  /*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;
  }
  &lt;/style&gt;
  
  &lt;div class="faq_container"&gt;
     &lt;div class="faq"&gt;
        &lt;div class="faq_question"&gt; &lt;?php
          foreach($faqArrays as $faqArray){
  
              echo "&lt;h1&gt;$faqArray[question]&lt;/h1&gt;";
  
          }
         ;?&gt;
        &lt;/div&gt;
             &lt;div class="faq_answer_container"&gt;
                &lt;div class="faq_answer"&gt;&lt;?php $faqArray[answer];?&gt;&lt;/div&gt;
             &lt;/div&gt;        
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Thanks,</p>