Member Avatar for rkumaram

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 because: typo
  • 2 Contributors
  • 6 Replies
  • 226 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by rkumaram
Member Avatar for vibhaJ

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
Member Avatar for rkumaram

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>
Member Avatar for vibhaJ

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

with

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

Member Avatar for rkumaram

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

Member Avatar for vibhaJ

>

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.