Accordion Syntax explanation

Accordion Syntax explanation

Hi

I was going through this code for an 'accordion' from this tutorial:

http://dcoder.eu/make-a-cool-accordion-with-html5-css3-and-jquery.html/

 however I did not understand the highlighted syntax:



$ ( document ) . ready ( function ( ) {
   function MyAccordion ( ) {
     // Hide the text containers
     $ ( 'dl.accordion dd' ) . hide ( ) ;
     // Insert a span with the class of "arrow" in every dt
     $ ( 'dl.accordion dt' ) . append ( '<span class="arrow"></span>' ) ;
     // Add the class "active" to the first header and display the text bellow it
     $('dl.accordion dt:first').addClass('active').nextUntil('dt').show();
 
     // Upon clicking a dt element
     $ ( 'dl.accordion dt' ) . click ( function ( ) {
         // A) if it has class "active", do:
         if ( $ ( this ) . hasClass ( "active" ) ) {
             // 1) Hide the text bellow it
             $ ( this ) . nextUntil ( 'dt' ) . slideUp ( 250 ) ;
             // 2) Remove its "active" class
             $ ( this ) . removeClass ( 'active' ) ;
         }
         // B) If it does not have the class "active", do:
         else {
             // 1) Show the text bellow it
             $ ( this ) . nextUntil ( 'dt' ) . slideDown ( 250 ) ;
             // 2) Hide the text bellow every other dt tag
             $(this).siblings('dt').nextUntil('dt').slideUp(250);
             // 3) Add the class "active" to it
             $ ( this ) . addClass ( 'active' ) ;
             // 4) Remove the class "active" from any other dt element
             $ ( 'dl.accordion dt' ) . not ( this ) . removeClass ( 'active' ) ;
         }
   } ) ;
}
MyAccordion ( ) ;
} ) ;



1) Why should the class active be added to the first header?

2) When the siblings are hidden what is the need to add the method
.nextUntil('dt')?


Would appreciate an explanation to this. Thanks a lot!

Jayashree