Simple faq page with PHP and jQuery

Question

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 and jQuery 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,

You defined your Q/A array in PHP and did not echo it anywhere.... So, long after... On client side, it's normal there is nothing. Have a look at [this reading on the difference bettween server-side and client-side](http://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — Louys Patrice Bessette, Jun 21 '16 at 18:21

Napoleon · Answer 1 · 2016-06-21T19:38:25.990

0

I don't know what you expected, or the output of your files. That would be great if that was posted too. But nonetheless, I tried running your files, and immediately got an error in your included php file. You have a unexpected comma. Here's how it should be:

<?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"
)

); ?>`

Secondly, you try to make a statement on this line:

<div class="faq_answer"><?php $faqArray[answer];?></div>

But you have never specified what answer is.

You could replace that line with:

<div class="faq_answer"><?php
    foreach($faqArrays as $faqArray){

        echo "<h1>$faqArray[answer]</h1>";

    }
   ;?></div>

That should make the script running. Tested AS IS.

EDIT:

Here's one way of achiving, what I think you're trying: http://pastebin.com/dQGzpTi1

edited Jun 21 '16 at 19:38

answered Jun 21 '16 at 18:26

Napoleon

340
3
13

Thanks, this lists all questions and answers on the page. However, I want to display each answer only if its associated question is clicked... – Mandy Jun 21 '16 at 18:33
I thought you would, I just corrected the syntax, and made it running. What you're doing wrong in the script, is that you put all the _questions_ in the same `
`. Instead, but each question in its own `
`
– Napoleon Jun 21 '16 at 18:52
updated the answer. Try the solution I provided, if it works great :) – Napoleon Jun 21 '16 at 19:39
I think that I accidentally deleted your code, here is the code: – Mandy Jun 21 '16 at 20:23
@ Napoleon :

– Mandy Jun 21 '16 at 20:23

Muhammad Sumon Molla Selim · Answer 2 · 2016-06-21T20:36:46.430

0

Try with this change to your HTML:

<div class="faq_container">
   <div class="faq">
        <?php
        foreach($faqArrays as $faqArray){
        ?>
      <div class="faq_question">
          <h1><?php echo $faqArray['question']; ?></h1>
      </div>
      <div class="faq_answer_container">
          <div class="faq_answer"><?php $faqArray['answer'];?></div>
      </div>
        <?php } ?>        
    </div>
 </div>

edited Jun 21 '16 at 20:36

answered Jun 21 '16 at 18:40

Muhammad Sumon Molla Selim

3,914
1
24
33

@ muhammad Sumon molla selim- I added echo to both $faqarray question and answer but the problem is that whenever I click on a question all answer pop up! – – Mandy Jun 21 '16 at 20:41

Simple faq page with PHP and jQuery

2 Answers2