Passing a variable into a javascript function in PHP to make specific divs hide or show?

Question

I am trying to create a simple FAQ page where the user clicks the question and the answer appears below it (or hides it, if clicked again).

I got it working up to a point where all the questions will show the answer labeled "ans1". But I would like to pass a variable from each question into the function so it makes the associated answer appear. Question 1 will show Answer 1, Question 2 -> Answer 2, and so on.

My function...

function theAnswer() {
    var x = document.getElementById("ans1");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

PHP...

<?php 
$answer = 1;
foreach($faqArray as $faq) {
    ?>
    <div class='product_container'>
        <div class='product_cell'>
            <a onclick="theAnswer()" href='#'>
            <?php echo $faq[0];?> 
            </a>
        </div>
    </div>
    <div class="answer" id="ans<?php echo $answer;?>" style="display:none;">
        <p><?php echo $faq[1];?></p>
    </div>
<?php 
    $answer = $answer + 1;
} ?>

If I put a variable in the onclick="theAnswer()" that dictates the associated div, how can I get the function to perform the desired result?

Thanks!

Add ans<?php echo $answer;?> as parameter for your function. Then hide/show the an element by id — user8034901
– user8034901, Commented Oct 28, 2021 at 17:21
Please search "Accordion with HTML/Css Or Bootstrap", and Clearly state your usecase — Rajnish
– Rajnish, Commented Oct 28, 2021 at 17:23

Ghibran Aljabbar · Accepted Answer · 2021-10-28 17:23:37Z

1

Your PHP code is run server-side and your Javascript code is run client-side. So the two codes cant interact with each other. I recommend hiding your element with CSS use something like this:

.hide{
 display : none
 }

and set your your div to hide like this

<div class='hide' id='answer-<?php echo $answer;?>'> .... </div>

and you would remove hide from your element's class list like this

  function theAnswer(num){
   answer = document.querySelector('#answer-' + num)
   answer.classList.remove('hide')
  }

in your php code youd have to put in the value

 .....
<a onclick="theAnswer('<?php echo $answer;?>')" href='#'>
 .....

edited Oct 28, 2021 at 17:23

answered Oct 28, 2021 at 15:52

Ghibran Aljabbar

874 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

banjax Over a year ago

So in this case, every question/answer pairing would have it's own separate function?

Ghibran Aljabbar Over a year ago

no you can load different content inside your divs with you php or js

banjax Over a year ago

I think this would work with one div that was used to display all the answers. But I am going to have a dedicated answer block under each question. So #answer1, #answer2, etc... This is where I am getting confused. How can I dictate to show #answer2, if I click on #question2? See image I added to original post for visual

user8034901 Over a year ago

"So the two codes cant interact with each other." That's not quite true. AJAX can be used to communicate client->server and PHP can be used to output variables in JS

user8034901 Over a year ago

id='answer' That's ok for one div/answer, what about multiple?

|

Collectives™ on Stack Overflow

Passing a variable into a javascript function in PHP to make specific divs hide or show?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related