Question

I have multiple sections as divs, each with a number appended to the end of the id(id=”section-‘.$section.'”). There could be many of these and the id would increment each time.

I am trying to write a jquery script to show and hide the correct id=”resource-‘.$section.'”.
When the user clicks on the img inside the section div, it will show hide the appropriate resource div and hide all others.

<div id="section-'.$section.'">
<img src="" id="section-img-'.$section.'"/>
</div>

<div id="resource-'.$section.'"></div>

<script type="text/javascript">
jQuery(document).ready(function() {
      jQuery("#resource").hide();
      jQuery("#section img").click(function()
           {
              jQuery(this).next("#resource").show();
           });
});
</script>

Any ideas or help would be very much appreciated.
Thanks in advance.

---

modification:

<div class="section" id="section-'.$section.'">
    <img src="" class="section-img" id="section-img-'.$section.'"/>
        </div>


    <div class="resource" id="resource-'.$section.'"></div>

---

jsfiddle.net/kqQDH/1

Answer 1

UPDATED

jQuery(document).ready(function() {
    jQuery('.resource').hide();
    jQuery('.section-img').click(function() {
        jQuery('.resource').hide(); //hide others

        //parse id for index
        var idx = jQuery(this).attr("id").split('-')[2];
        jQuery('#resource-'+idx).show(); //show this
    });
});​

---

A class is not an id. They are two completely different html attributes; classes need not be unique — and in fact your jQuery class selector relies on them not being so.

<div id="section-1" class="section" >
<img src="" id="section-img-1" class="section-img" />
</div>

<div id="resource-1" class="resource"></div>

<script type="text/javascript">
jQuery(document).ready(function() {
      jQuery('div[id^="resource"]').hide();
      jQuery('div[id^="section-img"]').click(function()
           {
              jQuery(this).parent().next('div[id^="resource"]').show();
           });
});
</script>​​​​​​

Note if you decide the previous structure of your classnames was necessary (for whatever reason), then you won’t be able to use a class selector — you will have to use an attribute starts-with selector.

It would be better if you assigned the elements ids as well as a class indicating what kind of element it is. e.g The first section would be <div id="section-1" class="section"></div>. Then you could select all sections at once with a simple class selector, or do something specific to one using its id.