wp-admin/js/accordion.js

   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);