Question

I’m having trouble explaining this but here it goes:

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.

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.

The accordion script uses the data-target 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.

Here’s what I have so far:

HTML link:

<a class="button maximize accordionHeading" data-target="firstAccordion" href="/Load/?ID=1">More Info</a>

HTML div:

<div class="accordionHidden firstAccordion">
    <div class="row" style="margin-top:10px;">
        <div class="six columns">
            <img class="load-image" src="images/dirt.jpg" />
        </div><!--/.six.columns-->
        <div class="six columns load-description">
            <!-- this is where the content should be loading -->
        </div><!--/.six.columns-->
    </div><!--/.row-->
</div><!--/.accordionHidden firstAccordion-->

Script:

$("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);

});

Answer 1

Based on the data-target of the anchors you can select the target divs by their class names, Try the following:

var $loadID = $(this).attr("href");
var tgt = $(this).data('target')
$("." + tgt + " .load-description").load($loadID);