0

Hi,

I am creating a small page with the help of jquery , What I want is when I click on shortdesc TR class, only the corresponding fulldesc ** TR class should be visible. Currently Its showing all the **fulldesc TR clasees. Please help me to solve this.

Following is my code:

<html>
  <head>
    <title>Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <SCRIPT type="text/javascript">
        $(document).ready(function(){
            $(".shortdesc").click(function(){
                    $(".fulldesc").toggle("slow");
            });
        });
        </SCRIPT>        
    <style type="text/css">
    .shortdesc{ color:red;}
    .fulldesc{ color:green; display:none;}
    </style> 
  </head>
  <body>

    <table>
    <?php
    for($count=1; $count<=10; $count++)
    {?>      
        <tr class="shortdesc"><td><?=$count?> Short description</td></tr>                        
        <tr class="fulldesc"><td>My Name is <?=$count?> and this is full description </td></tr>
    <?php
    }
    ?>
    </table>
  </body>
</html>

Edited by rkumaram: typo

2
Contributors
6
Replies
8
Views
5 Years
Discussion Span
Last Post by rkumaram
0

Try this:

<html>
  <head>
    <title>Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>                
    <style type="text/css">
    .shortdesc{ color:red;}
    .fulldesc{ color:green; display:none;}
    </style> 
  </head>
  <body>
    <table>
    <?php

    for($count=1; $count<=10; $count++)
    {?>      
        <tr id="short<?=$count?>" onClick="$('#full<?=$count?>').toggle("slow");;" class="shortdesc"><td><?=$count?> Short description</td></tr>                        
        <tr id="full<?=$count?>" class="fulldesc"><td>My Name is <?=$count?> and this is full description </td></tr>
    <?php
    }
    ?>
    </table>
  </body>
</html>

Edited by vibhaJ

0

Hi Vibha, Thanks for your prompt response.
I treid your code but irs not working at all.

<html>
  <head>
    <title>Demo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <style type="text/css">
        .shortdesc{ color:red;}
        .fulldesc{ color:green; display:none;}
        </style>        
  </head>
  <body>

        <table>
        <?php
                for($count=1; $count<=10; $count++)
                {?>

                <tr id="short<?=$count?>" onClick="$('#full<?=$count?>').toggle("slow");;" class="shortdesc"><td><?=$count?> Short description</td></tr>
                <tr id="full<?=$count?>" class="fulldesc"><td>My Name is <?=$count?> and this is full description </td></tr>

                <?php
                }
        ?>
        </table>
  </body>
</html>
1

Ohh..
Replace
onClick="$('#full<?=$count?>').toggle("slow");"

with

onClick="$('#full<?=$count?>').toggle('slow');"

0

Thank you very much. It worked.

If I will go one step further and if I need all other TR which are open should be closed except the one which needs to be display. What could be the solution for this.

Mean to say

Short TR1 
Full    TR1
Short TR2  -- If I cliked on short TR2 Full TR2 is displaying, at the same time I want to hide all other Full TR's
Full    TR2
Short TR3
Full    TR3
Short TR4
Full    TR4
Short TR5
Full    TR5

Thanks in advance :)

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.