Jquery Selectors in Depth

Question

I am displaying name of groups from database in ul >li and it's parameters in <div> which is initially hidden. Now using jQuery I want to toggle only <div> but same time want to hide all others.

I have tried the following code but it does not work in jQuery 1.7. Can any one please help me how to use .not or .filter while selecting all divs that starts with "group" or some other solution?

$("#popupContact").delegate("ul.horizontal_lists li a", "click", function() {
    var target_id = $(this).attr('id');
    target_id = "divOf" + target_id;
    $('#' + target_id).slideToggle("slow");
    $('[id^="divOf"]'.not(this)).hide();
}

Answer 1

I think one of your main problems is that your searching for div's, but excepting this. Since this is an anchor, I don't think this'll ever work

$('[id^="divOf"]'.not(this)).hide();

I think you're looking for something like this:

var target_id = $(this).attr('id');
target_id = "divOf" + target_id;
$('#' + target_id).slideToggle("slow");
$('div[id^="divOf"]:not("#' + target_id + '")').hide();

The last line selects all divs that have an id starting with divOf, but not the one with an id of target_id, and hiding them

Answer 2

you should also start using on since delegate has been deprecated in jquery 1.7.

$("#popupContact").on("click", "ul.horizontal_lists li a", function() {
    var target_id = $(this).attr('id');
    target_elem = $("#divOf" + target_id);
    $('[id^="divOf"]').not(target_elem).hide();
    target_elem.slideToggle("slow");
}