Question

As I will have multiple places where this is, I would like to get it to work with a unique data.

Like instead of <a class="snippet_show_answers" href="#">Se svar</a> then maybe something like <a DATA="1" class="snippet_show_answers" href="#">Se svar</a>, which then should run as a part of my script, so that it only handle for the clicked DATA, and not for all of the boxes.

My HTML is this (With multiple of those):

<p class="snippet_answers">Svar: 3 - <span class="green"><a class="snippet_show_answers" href="#">Se svar<img src="images/answerarrow.png" alt="answerarrow" height="14" width="13"></a><a class="snippet_hide_answers" href="#" style="display: none;">Skjul svar<img src="images/answerarrow.png" alt="answerarrow" height="14" width="13"></a></span><hr />
    <div class="answers" style="display: none;">
        <p>blablabla</p>
    </div>
</p>

My JS is this:

$('.snippet_show_answers').live("click", function() {
    $('.answers').slideDown("slow");
    $('.snippet_show_answers').fadeOut("slow");
    $('.snippet_hide_answers').fadeIn("slow");
    return false;
});

$('.snippet_hide_answers').live("click", function() {
    $('.answers').slideUp("slow");
    $('.snippet_hide_answers').fadeOut("slow");
    $('.snippet_show_answers').fadeIn("slow");
    return false;
});

Hope someone understand me, cause I have seen this method before, but I dont know the name of it, or anything.

Thanks in advanced.

Answer 1

Get a reference to the clicked item’s parent element and then find its descendants with the appropriate class:

$('.snippet_show_answers').live("click", function() {
    var item = $(this).closest(".snippet_answers");
    item.find('.answers').slideDown("slow");
    item.find('.snippet_show_answers').fadeOut("slow");
    item.find('.snippet_hide_answers').fadeIn("slow");
    return false;
});

$('.snippet_hide_answers').live("click", function() {
    var item = $(this).closest(".snippet_answers");
    item.find('.answers').slideUp("slow");
    item.find('.snippet_hide_answers').fadeOut("slow");
    item.find('.snippet_show_answers').fadeIn("slow");
    return false;
});

Also, if you are using the latest version of jQuery, make sure to change .live() to .on(). .live() was recently deprecated.