Question

Apologies for the vague title, but this is quite a difficult problem to explain in one line!

I have an accordion with several list items and the divs which expand when each list item is clicked on. I’m using the accordion with some ajax functionality which actually removes the a list item when an action is committed, but I don’t need to explain that, the most important thing to know is that elsewhere on the page the user has the ability to remove a list item within the accordion.

The problem

Once a the active list item has been deleted, the next list item is still collapsed. What I need to do is actually have that next list item expand automatically as soon as the list item above it has been deleted.

I’ve had a look at the Jquery UI documentation and can’t seem to figure out how I can achieve this.

Code

This is the function which hides the li within the accordion:

function hideMatchBox(boxId,sourceKey){
    $('#'+boxId).animate({height: 0},1000,function(){
        var allHidden = true;
        $('#manualMatches li').each(function(index){
            if($(this).height() > 0)    {
                allHidden = false; // -failsafe
            }           
        });
        if(allHidden){
            $('#manualMatches').html('<p>All records are matched for your service.</p>');
        }
    });
}

So what I need to do is somehow tell the accordion to ‘reload’ and expand the second from top li once this hideMatchBox function has been run.

One issue with this is that there is no guarantee what order of li will be hidden, so I actually think it may be better to delete the li completely, rather than hiding it? Or perhaps move the hidden li to the bottom of the list, and then expand the first li?

Hope that makes a bit more sense! Quite difficult to provide an example but if needbe I will.

Any help will be greatly appreciated!

Thanks

Answer 1

In the “delete” function you add something like:

var NextIndex = $(this).closest('.div').next();
$('#yourAccordian').accordion( "activate" , NextIndex );

Or you should be able to use the same index, if you place it after the delete, depending on what function you use to remove the accordian element 🙂

Need code, to give an concrete soloution.