Show hide table rows onclick php javascript

Hi i have a page which displays FAQ's, these are generated from a database and a table row is created for each question and each answer, i want to be able to show/ hide each answer by clicking a button and calling javascript function

<script language="Javascript">

            function showanswer()
            {
                document.getElementById('answer').style.visibility="visible";
                document.getElementById('show').style.visibility = "hidden";
                document.getElementById('hide').style.visibility = "visible";  
            }
           
            function hideanswer()
            {
                document.getElementById('answer').style.visibility="hidden";
                document.getElementById('hide').style.visibility = "hidden";
                document.getElementById('show').style.visibility = "visible";    
            }
</script>

//mssql query to get questions and answers from database

<table><?
    While($row = mssql_fetch_object($result2))
    {
?>
        <tr>
        <td width="400"> <?echo  $row->Question ?> </td>
        <td>
        <input type="button" value="Show" id="show" onclick="showanswer()" >
        <input type="button" value="Hide" id="hide" style="visibility: hidden;" onclick="hideanswer()" >
        </td>
        </tr>

        <tr>
        <td style="visibility: hidden;" id="answer" colspan="2"><? echo  $row->Answer?></td></tr>
       
  <?}?>

This is working fine for the first answer, it can be displayed/ hidden using the buttons, but i cannot display/hide the rest of the answers

I think this is because each row being created for the answers inside the while loop has the same id, as does each show button and each hide button.
and so i think i need to create some sort of array and use this as the id, any help on how to do this and then reference the id in the javascript functions?

or any other suggestions on how i should do this?

thanks
CoreSupportAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Andyc75Software ArchitectCommented:
jQuery can do this very easily.

Use the toggle effect on your item to show and hide it.

http://www.w3schools.com/jquery/jquery_effects.asp
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle
0
leakim971PluritechnicianCommented:
Hello CoreSupport,

You need to have an id by field :

So :


<script language="Javascript">

            function showanswer(the_id)
            {
                document.getElementById('answer'+the_id).style.visibility="visible";
                document.getElementById('show'+the_id).style.visibility = "hidden";
                document.getElementById('hide'+the_id).style.visibility = "visible";  
            }
            
            function hideanswer(the_id)
            {
                document.getElementById('answer'+the_id).style.visibility="hidden";
                document.getElementById('hide'+the_id).style.visibility = "hidden";
                document.getElementById('show'+the_id).style.visibility = "visible";    
            }
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
leakim971PluritechnicianCommented:
And your php code :


<table><?
    $i = 0;
    while($row = mssql_fetch_object($result2))
    {
        $i++;
?>
        <tr>
        <td width="400"> <?echo  $row->Question ?> </td>
        <td>
        <input type="button" value="Show" id="show<?php echo $i ?>" onclick="showanswer()" >
        <input type="button" value="Hide" id="hide<?php echo $i ?>" style="visibility: hidden;" onclick="hideanswer()" >
        </td>
        </tr>

        <tr>
        <td style="visibility: hidden;" id="answer<?php echo $i ?>" colspan="2"><? echo  $row->Answer?></td></tr>
        
  <?}?>

Open in new window

0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

CoreSupportAuthor Commented:
Hi leakim971

this is what i was looking for, but using 'the_id' parameter is not working

so how do i send the php variable $i to the javascript parameter ''the_id' so that it knows which answer to show/hide?

thanks
0
leakim971PluritechnicianCommented:
Sorry, I miss that :

Lie 10 and 11 from ID:28548282
<input type="button" value="Show" id="show<?php echo $i ?>" onclick="showanswer(<?php echo $i ?>)" >
        <input type="button" value="Hide" id="hide<?php echo $i ?>" style="visibility: hidden;" onclick="hideanswer(<?php echo $i ?>)" >

Open in new window

0
CoreSupportAuthor Commented:
yes working great now, thankyou
0
leakim971PluritechnicianCommented:
You're welcome! Thanks a lot for the points!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.