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>

Recommended Answers

All 6 Replies

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>

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>

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

with

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

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 :)

>

Change onclick

onClick="$('.fulldesc').hide();$('#full<?=$count?>').toggle('slow');"
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.