using jQuery to select .parent()

[devinodaniel]

Hello friends!

Suppose I have something similar to this HTML (this is not my exact HTML, rewritten to simplify):

<a onclick="ShowHide(); return false;" href="#">show/hide</a>
<div>
<div id="summary">Summary of info below</div>
<div id="enclosure" style="display:none;">Information</div>
</div>

<a onclick="ShowHide(); return false;" href="#">show/hide</a>
<div>
<div id="summary">Summary of info below</div>
<div id="enclosure" style="display:none;">Information</div>
</div>

<a onclick="ShowHide(); return false;" href="#">show/hide</a>
<div>
<div id="summary">Summary of info below</div>
<div id="enclosure" style="display:none;">Information</div>
</div>

<a onclick="ShowHide(); return false;" href="#">show/hide</a>
<div>
<div id="summary">Summary of info below</div>
<div id="enclosure" style="display:none;">Information</div>
</div>

These DIVS are full of information populated from a MSQL db. So the DIV names cannot be unique.

I have this jQuery code:

function ShowHide() {
$("#enclosure").animate({"height": "toggle"}, { duration: 500 });
$("#summary").toggle({"opacity":"0%"}, { duration: 200 });       
             };

This code actually works perfectly except for one major headache. When I click the 'hide/show' link on any of these - the only one that hides or shows is the first set.
After research I feel like I'll need to use the .parent() selector or (this) somewhere but I feel like I've tried every combination.

Any ideas? Thank you SO much.

[kekkaishi]

I am no expert in jQuery but I can suggest some changes that would enable you to achieve what you are trying.
1. change all your IDs into classes (although it would work with IDs, if you are following W3C standard you are not allowed to have more than one element with the same ID.)
2. move the a tags into the div so that it'd be structured

<div>
    <a  ..>show/hide</a>
    <div class="summary">..</div>
    <div class="enclosure">..</div>
   </div>

and remove the showHide() function from within a tag. (from the script because I am suggesting you to listen to .click function inside $(document).ready() function

3. check this. include it inside head after including jquery file.

<script type="text/javascript">
            $(document).ready(function(){
                $('a').click(function(){
                    $(this).parent().children(".enclosure").animate({"height": "toggle"}, { duration: 500 });
                     $(this).parent().children(".summary").toggle({"opacity":"0%"}, { duration: 200 });

            });
       });
</script>

Hope this helps.

[devinodaniel]

thank you! i knew it was something like this. one issue I over looked though is what do I set my 'show/hide' link href as?

<div>
    <a href="what goes here">show/hide</a>
    <div class="summary">..</div>
    <div class="enclosure">..</div>
   </div>

thank you!

I am no expert in jQuery but I can suggest some changes that would enable you to achieve what you are trying.
1. change all your IDs into classes (although it would work with IDs, if you are following W3C standard you are not allowed to have more than one element with the same ID.)
2. move the a tags into the div so that it'd be structured

<div>
    <a  ..>show/hide</a>
    <div class="summary">..</div>
    <div class="enclosure">..</div>
   </div>

and remove the showHide() function from within a tag. (from the script because I am suggesting you to listen to .click function inside $(document).ready() function

3. check this. include it inside head after including jquery file.

<script type="text/javascript">
            $(document).ready(function(){
                $('a').click(function(){
                    $(this).parent().children(".enclosure").animate({"height": "toggle"}, { duration: 500 });
                     $(this).parent().children(".summary").toggle({"opacity":"0%"}, { duration: 200 });

            });
       });
</script>

Hope this helps.

[kekkaishi]

a '#' would do. cheers.

[devinodaniel]

ahhhhhhhhh i got it to work . THANK YOU THANK YOU THANK YOU! I've been struggling with this for weeks!

a '#' would do. cheers.