Simple fap page with php and jquery : 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. here is the code for the array part which is in a folder called "includes":

        <?php
    
    $faqArrays=  array(
       array(
            "question" => "this is question 1",
            "answer" => "this is the answer for the first question"        
        ),
        array(
            "question" => "this is question 2",
            "answer" => "this is the answer for the 2 question"        
        ),    
        ,array(
            "question"=>"this is question 7",
            "answer"=>"this is the answer for the 7 question"        
        ) 
    );        
            
        ?>

and here is the html+jqury code


    <?php
    
    include('includes/arrays.php');
    ?>
    
    <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"> <?php
            foreach($faqArrays as $faqArray){
                
                echo "<h1>$faqArray[question]</h1>";
                
            }
           ;?>
          </div>
               <div class="faq_answer_container">
                  <div class="faq_answer"><?php $faqArray[answer];?></div>
               </div>        
        </div>
     </div>

Thanks,