Question

Seem to be stuck trying to only update images in a selected div, when all the div names are the same.

<div class="collapse">img img img img img</div>
<div class="collapse">img img img img img img img</div>
<div class="collapse">img img img </div>
<div class="collapse">img img img img img img</div>

I have the data of the images set inside a data-src tag, and when the div gets expanded, it loads the images. However, since the divs have the same class name, when it goes to load the images in the expanded div, it loads all the images in all the collapse divs.

    $(function() {
      $('.collapse img').attr('src', function(index, src) {
         return this.getAttribute('data-src');
      });
    });

This is the code inside my expand code, how can it be changed to only load the images in the currently selected div?

Edit – Expand Code:

$.fn.toggler = function(options) {
    var o = $.extend({}, $.fn.toggler.defaults, options);

    var $this = $(this);
    $this.wrapInner('<a style="display:block; color: #fff; text-decoration: none;" href="#" title="Expand/Collapse" />');
    if (o.initShow) {$(o.initShow).addClass('shown');}
    $this.next(o.cllpsEl + ':not(.shown)').hide();
    return this.each(function() {
      var container;
      (o.container) ? container = o.container : container = 'html';
      if ($this.next('div.shown').length) { $this.closest(container).find('.shown').show().prev().find('a').addClass('open'); }
      $(this).click(function() {



        $(function() {
          $('.collapse img').attr('src', function(index, src) {
             return this.getAttribute('data-src');
          });
        });



        $(this).find('a').toggleClass('open').end().next(o.cllpsEl)[o.method](o.speed);
        return false;
    });
});};

Edit 2 – How the div gets expanded. Sorry, still pretty new to this site. Should have given more info.

This is the javascript at the top of the page:

  <script type="text/javascript">
    $(function() {
      $("span.expand").toggler({method: "toggle", speed: 0});
    });
  </script>

The span that gets clicked to expand the div:

<span class="expand">&nbsp;</span>

The span is set up in css to show an image as the background.

Edit: Found the solution.

I placed:

$(this).find('a').toggleClass('open').end().next(o.cllpsEl)[o.method](o.speed);

Above the show image code, so that it would toggle it open first before trying to load the images, and changed the load image code to:

    $(function() {
      $this.closest(container).find('.collapse:visible img').attr('src', function(index, src) {
         return this.getAttribute('data-src');
      });
    });

Thanks all 😛

Answer 1

This is assuming that you are handling your expansion by clicking the div in question

$(".collapse").click(function() {
    // code that handles expanding 
    // ....

    $(this).children("img").attr('src', function(index, src) {
        return this.getAttribute('data-src');
    });
});