Question

I have multiple divs setup, with headers and content.
When you click the header, it expands the content on the selected div, and hides all others.
This works fine, but I need to get the ID’s of all the content divs, that have been hidden or shown.

This is my jquery for the hide/show:

$(".CollapsableHeader").next(".CollapsableDiv").hide();
            $(".CollapsableHeader").click(function () {
                $('.active').not(this).toggleClass('active').next('.CollapsableDiv').slideToggle(300, function () {
                    alert($(this).next('.CollapsableDiv').attr('id'));
                });
                $(this).toggleClass('active').next().slideToggle("fast");

            });

So, in this example, my alert always comes up as, undefined.
Everything I have tried, comes up as undefined.
Any idea how I can get the ID’s of the .CollapsableDiv‘s?

Answer 1

If you’re looking for the id of the “next” .CollapsableDiv after the .CollapsableHeader that was clicked, grab it in the click handler rather than the slideToggle callback:

$(".CollapsableHeader").next(".CollapsableDiv").hide();
            $(".CollapsableHeader").click(function () {
                // Grab it here
                var id = $(this).next('.CollapsableDiv').attr('id');
                $('.active').not(this).toggleClass('active').next('.CollapsableDiv').slideToggle(300, function () {
                    // Then use it here
                    alert(id);
                });
                $(this).toggleClass('active').next().slideToggle("fast");

            });

The reason is that the this within your slideToggle callback is a different element (specifically, it’s whatever you end up with from $('.active').not(this).toggleClass('active').next('.CollapsableDiv').)