home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress / wp-admin / js / accordion.js next >
Encoding:
JavaScript  |  2015-07-29  |  2.8 KB  |  94 lines
  1. /**
  2.  * Accordion-folding functionality.
  3.  *
  4.  * Markup with the appropriate classes will be automatically hidden,
  5.  * with one section opening at a time when its title is clicked.
  6.  * Use the following markup structure for accordion behavior:
  7.  *
  8.  * <div class="accordion-container">
  9.  *    <div class="accordion-section open">
  10.  *        <h3 class="accordion-section-title"></h3>
  11.  *        <div class="accordion-section-content">
  12.  *        </div>
  13.  *    </div>
  14.  *    <div class="accordion-section">
  15.  *        <h3 class="accordion-section-title"></h3>
  16.  *        <div class="accordion-section-content">
  17.  *        </div>
  18.  *    </div>
  19.  *    <div class="accordion-section">
  20.  *        <h3 class="accordion-section-title"></h3>
  21.  *        <div class="accordion-section-content">
  22.  *        </div>
  23.  *    </div>
  24.  * </div>
  25.  *
  26.  * Note that any appropriate tags may be used, as long as the above classes are present.
  27.  *
  28.  * @since 3.6.0.
  29.  */
  30.  
  31. ( function( $ ){
  32.  
  33.     $( document ).ready( function () {
  34.  
  35.         // Expand/Collapse accordion sections on click.
  36.         $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) {
  37.             if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key
  38.                 return;
  39.             }
  40.  
  41.             e.preventDefault(); // Keep this AFTER the key filter above
  42.  
  43.             accordionSwitch( $( this ) );
  44.         });
  45.  
  46.     });
  47.  
  48.     /**
  49.      * Close the current accordion section and open a new one.
  50.      *
  51.      * @param {Object} el Title element of the accordion section to toggle.
  52.      * @since 3.6.0
  53.      */
  54.     function accordionSwitch ( el ) {
  55.         var section = el.closest( '.accordion-section' ),
  56.             sectionToggleControl = section.find( '[aria-expanded]' ).first(),
  57.             container = section.closest( '.accordion-container' ),
  58.             siblings = container.find( '.open' ),
  59.             siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(),
  60.             content = section.find( '.accordion-section-content' );
  61.  
  62.         // This section has no content and cannot be expanded.
  63.         if ( section.hasClass( 'cannot-expand' ) ) {
  64.             return;
  65.         }
  66.  
  67.         // Add a class to the container to let us know something is happening inside.
  68.         // This helps in cases such as hiding a scrollbar while animations are executing.
  69.         container.addClass( 'opening' );
  70.  
  71.         if ( section.hasClass( 'open' ) ) {
  72.             section.toggleClass( 'open' );
  73.             content.toggle( true ).slideToggle( 150 );
  74.         } else {
  75.             siblingsToggleControl.attr( 'aria-expanded', 'false' );
  76.             siblings.removeClass( 'open' );
  77.             siblings.find( '.accordion-section-content' ).show().slideUp( 150 );
  78.             content.toggle( false ).slideToggle( 150 );
  79.             section.toggleClass( 'open' );
  80.         }
  81.  
  82.         // We have to wait for the animations to finish
  83.         setTimeout(function(){
  84.             container.removeClass( 'opening' );
  85.         }, 150);
  86.  
  87.         // If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value.
  88.         if ( sectionToggleControl ) {
  89.             sectionToggleControl.attr( 'aria-expanded', String( sectionToggleControl.attr( 'aria-expanded' ) === 'false' ) );
  90.         }
  91.     }
  92.  
  93. })(jQuery);
  94.