title: AJAX Loading in Child Div
body: <p>I'm having trouble explaining this but here it goes:</p>
  
  <p>I have a custom accordion script that's triggered when a user clicks on a link. There are multiple accordions on each page, each with there their own link. This script works perfectly, each link only opening its correct accordion.</p>
  
  <p>Now, I need to modify this script to load content via AJAX in to a div within the accordion. I have the  AJAX loading down, but instead of loading in to one DIV, it's loading in to every DIV with the same class. I understand why it's doing this, but I don't see how to tie it in with the existing script. It uses the same button to load the content, so it should be fairly easy. </p>
  
  <p>The accordion script uses the <code>data-target</code> attribute to specify which accordion to open, so that should be able to be tied in to the new script, but for the life of me I can't figure it out.</p>
  
  <p>Here's what I have so far:</p>
  
  <p>HTML link:</p>
  
  <pre><code>&lt;a class="button maximize accordionHeading" data-target="firstAccordion" href="/Load/?ID=1"&gt;More Info&lt;/a&gt;
  </code></pre>
  
  <p>HTML div:</p>
  
  <pre><code>&lt;div class="accordionHidden firstAccordion"&gt;
      &lt;div class="row" style="margin-top:10px;"&gt;
          &lt;div class="six columns"&gt;
              &lt;img class="load-image" src="images/dirt.jpg" /&gt;
          &lt;/div&gt;&lt;!--/.six.columns--&gt;
          &lt;div class="six columns load-description"&gt;
              &lt;!-- this is where the content should be loading --&gt;
          &lt;/div&gt;&lt;!--/.six.columns--&gt;
      &lt;/div&gt;&lt;!--/.row--&gt;
  &lt;/div&gt;&lt;!--/.accordionHidden firstAccordion--&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>$("a.accordionHeading").bind("click", function(e){
      e.preventDefault();
      $("."+$(this).data("target")).slideToggle();
      $(this).addClass("minimize");
      if ($(this).text() == "More Info") {
         $(this).text("Less Info");
         $(this).removeClass("maximize").addClass("minimize");
      } else {
          $(this).addClass("maximize").removeClass("minimize").text("More Info");
      }
  
      // this is what I'm trying to add.
      var $loadID = $(this).attr("href");
      $(".load-description").load($loadID);
  
  });
  </code></pre>