[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Show hide table rows onclick php javascript

Posted on 2010-03-25
7
Medium Priority
?
1,777 Views
Last Modified: 2013-12-12
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
0
Comment
Question by:CoreSupport
  • 4
  • 2
7 Comments
 
LVL 11

Expert Comment

by:Andyc75
ID: 28547371
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
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 28548015
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
 
LVL 83

Assisted Solution

by:leakim971
leakim971 earned 2000 total points
ID: 28548282
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:CoreSupport
ID: 28550254
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
 
LVL 83

Assisted Solution

by:leakim971
leakim971 earned 2000 total points
ID: 28551409
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
 

Author Comment

by:CoreSupport
ID: 28552192
yes working great now, thankyou
0
 
LVL 83

Expert Comment

by:leakim971
ID: 28552868
You're welcome! Thanks a lot for the points!
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
This article discusses how to implement server side field validation and display customized error messages to the client.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

591 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question