Home/ Questions/Q 7083793
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:13:19+00:00

In my view <ul> <li id=list> <table cellpadding=0 cellspacing=0 width=100% class=grid-table08 id=table1> <tbody> <tr><td><img

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0