0

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.

2
Contributors
4
Replies
6
Views
6 Years
Discussion Span
Last Post by devinodaniel
0

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.

0

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.

0

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

a '#' would do. cheers.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.