Question

I didn’t write this code myself but a colleges has asked me to help resolve an issue. I’m not having much look with google so thought I’d give it a shot here.

function($) {
 var accordion = $('dl > dd').hide().slice(0, 1).show();

 $('dl > dt > a').click(function() {
 accordion.slideUp();
 if($(this).parent().next().is(':hidden'))
 { 
   $(this).parent().next().slideDown();
 }
 return false;
});
})(jQuery);

This code is supposed to open and close panels on the page.

If we change this line

 var accordion = $('dl > dd').hide().slice(0, 1).show();

to this line

 var accordion = $('dl > dd').hide();

Everything works as should but we would like the first panel to show when the page loads.

With the code as is when you open a panel the open ones don’t close.

Answer 1

The issue is you are filtering the elements using slice method and finally accordion is a jQuery object which has only 1 selected element, not all the accordion elements, you can use end method:

var accordion = $('dl > dd').hide().first().show().end(); 

or:

var accordion = $('dl > dd').hide(); 
accordion.first().show();