CODEWITHSUNDEEP
jqueryhtml
Sreenath Plakkat
Sreenath Plakkat

Reputation: 1785

How can i correct hiding a list from a group of html list?

In my view 

<ul>
<li id="list">
<table cellpadding="0" cellspacing="0" width="100%" class="grid-table08" id="table1">
<tbody>
<tr><td><img src="../../Content/Images/downarrow.gif" title="Hide Details" class="hide">
</td></tr>

<tr><td align="left" valign="top" width="15" nowrap="nowrap">
Hii good morning
</td>
<tr>
</table>
</li>

<li>
<table cellpadding="0" cellspacing="0" width="100%" class="grid-table08" id="table1">
<tbody>
<tr><td><img src="../../Content/Images/downarrow.gif" title="Hide Details"  class="hide">
</td></tr>

<tr><td align="left" valign="top" width="15" nowrap="nowrap">
Hii good evening
</td>
<tr>
</table>
</li>

</ul>

There are total 10 li when i click the image with id hide i need to hide the particular li

my script as follows 

 <script type="text/javascript">
$(function () {

    $(".hide").live("click", function () {

       $(".hide").closest("li").hide("slow");


    });

});

but its not working anyone pls help me

Upvotes: 0

Views: 116

Answers (2)

papaiatis
papaiatis

Reputation: 4291

Your img tags has an ID="hide" instead of CLASS="hide".

WRONG:  <img src="../../Content/Images/downarrow.gif" title="Hide Details" id="hide"> 
GOOD:   <img src="../../Content/Images/downarrow.gif" title="Hide Details" class="hide"> 

$(".hide") - this one selects all elements with class="hide"

UPDATE:

Also, you have multiple LI tags with the same ID="list": <li id="list"> You have to use a class: <li class="list">

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

SOLUTION:

<li class="list"> 
<table cellpadding="0" cellspacing="0" width="100%" class="grid-table08" id="table1"> 
<tbody> 
<tr><td><img src="../../Content/Images/downarrow.gif" title="Hide Details" class="hide"> 
</td></tr> 

<tr><td align="left" valign="top" width="15" nowrap="nowrap"> 
Hii good morning 
</td> 
<tr> 
</table> 
</li> 

<li class="list"> 
<table cellpadding="0" cellspacing="0" width="100%" class="grid-table08" id="table1"> 
<tbody> 
<tr><td><img src="../../Content/Images/downarrow.gif" title="Hide Details" class="hide"> 
</td></tr> 

<tr><td align="left" valign="top" width="15" nowrap="nowrap"> 
Hii good evening 
</td> 
<tr> 
</table> 
</li> 

</ul>

and

$(function () {  
    $(".hide").live("click", function () {  
        $(this).parents("li.list:first").hide("slow");  
    });  
});

Try the demo here: http://jsfiddle.net/RtXn9/

Upvotes: 1

coolguy
coolguy

Reputation: 7954

You cant use unique id for more than one element ..change id="hide" to class="hide" in your HTML 

 $(document).ready(function(){    

        $(".hide").live("click", function () {    
           $(this).parents().find('li').hide('slow');   

        });    

    });

Upvotes: 1

Related Questions