jquery hide show or toggle div требуется решение для нумерации

Question

У меня есть простой сценарий jQuery show show, который я схватил с примера сайта. Я пытаюсь пройти через $ (это). для таргетинга на divs, которые я хочу скрыть/показать. Я смог сделать эту работу для первого goruping, что-то после первого сбоя. Я переработал код, поэтому у меня есть несколько примеров неудачи ниже, чтобы помочь решить, что я пытаюсь сделать. Вот код.

<script type="text/javascript"> 
//$(document).ready(function(){ 
// $("#hide").click(function(){ 
// $(this).('#hideShowParent > #hideShow').hide(); 
// }); 
// $("#show").click(function(){ 
// $(this).('#hideShowParent > #hideShow').show(); 
// }); 
//}); 
$(document).ready(function(){ 
$("#hide").click(function(){ 
    $(this).find().parent("#hideShowParent").sibling("#hideShow").hide(); 
}); 
$("#show").click(function(){ 
    $(this).find().parent("#hideShowParent").sibling("#hideShow").hide(); 
}); 
}); 
</script> 

Теперь я перебираю то, что может иметь один или два или более. Я хотел бы, чтобы мой JQuery для нацеливания родителя кнопки щелкнутой, найти родственный Div под названием hideShow в непосредственной близости ниже и скрыть или показать (можно использовать переключатель тоже.

<div id="hideShowParent"> 
<ul> 
<li> 
    <button id="show">Show</button> 
    - <button id="hide">Hide</button> 
    <b>Medium</b> 
     <div id="hideShow"> 

       <table> 
        <tr> 
         <td><hr /></td> 
        </tr>    
        <tr><td height="15px">somethingn textual</td></tr> 
        <tr> 
         <td><hr /></td> 
        </tr> 
       </table> 

     </div> 
</li> 
</ul> 
</div> 
<div id="hideShowParent"> 
<ul> 
<li> 
    <button id="show">Show</button> 
    - <button id="hide">Hide</button> 
    <b>Medium</b> 
     <div id="hideShow"> 

       <table> 
        <tr> 
         <td><hr /></td> 
        </tr>    
        <tr><td height="15px">somethingn textual</td></tr> 
        <tr> 
         <td><hr /></td> 
        </tr> 
       </table> 

     </div> 
</li> 
</ul> 
</div> 

Заранее спасибо за помощь. Я надеюсь, что все это имеет смысл

Answer 1

во-первых, вы должны использовать атрибут id таким образом - идентификаторы должны быть уникальными, поэтому я бы заменить их с атрибутом class, которые могут быть одинаковыми по нескольким элементам DOM:..

<div class="hideShowParent"> 
<ul> 
<li> 
    <button class="show">Show</button> 
    - <button class="hide">Hide</button> 
    <b>Medium</b> 
     <div class="hideShow"> 

       <table> 
        <tr> 
         <td><hr /></td> 
        </tr>    
        <tr><td height="15px">somethingn textual</td></tr> 
        <tr> 
         <td><hr /></td> 
        </tr> 
       </table> 

     </div> 
</li> 
</ul> 
</div> 
<div class="hideShowParent"> 
<ul> 
<li> 
    <button class="show">Show</button> 
    - <button class="hide">Hide</button> 
    <b>Medium</b> 
     <div class="hideShow"> 

       <table> 
        <tr> 
         <td><hr /></td> 
        </tr>    
        <tr><td height="15px">somethingn textual</td></tr> 
        <tr> 
         <td><hr /></td> 
        </tr> 
       </table> 

     </div> 
</li> 
</ul> 
</div> 

Следующий код будет тогда работать:

$(document).ready(function() { 
    $(".hide").click(function() { 
     $(this).siblings(".hideShow").hide(); 
    }); 
    $(".show").click(function() { 
     $(this).siblings(".hideShow").show(); 
    }); 
}); 

Рабочий пример: http://jsfiddle.net/MztAm/