Question

I have a simple hide show jquery script I grabbed from an example site. I am trying to traverse through using $(this). to target the divs I want to hide/show. I have been able to make this work for the first goruping, anything after the first fails. I have tinkered with the code so I have a few examples of failure below to help decern what it is I am trying to do. Here is the code.

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

now i am looping over something that may have one or two or more. I would like for my jQuery to target the parent of the clicked button, find the sibling div called hideShow in the closest proximity below and hide or show (could use toggle too.

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

Thanks in advance for the help. I hope all this make sense.

Answer 1

Firstly you should use the id attribute in that way – ID’s should be unique. So i would replace them with the class attribute which can be the same on multiple DOM elements :

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

The following code would then work :

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

Working example : http://jsfiddle.net/MztAm/