[Summary view] [Print] [Text view]

   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   * @output wp-admin/js/accordion.js
  30   */
  31  
  32  ( function( $ ){
  33  
  34      $( function () {
  35  
  36          // Expand/Collapse accordion sections on click.
  37          $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) {
  38              if ( e.type === 'keydown' && 13 !== e.which ) { // "Return" key.
  39                  return;
  40              }
  41  
  42              e.preventDefault(); // Keep this AFTER the key filter above.
  43  
  44              accordionSwitch( $( this ) );
  45          });
  46  
  47      });
  48  
  49      /**
  50       * Close the current accordion section and open a new one.
  51       *
  52       * @param {Object} el Title element of the accordion section to toggle.
  53       * @since 3.6.0
  54       */
  55  	function accordionSwitch ( el ) {
  56          var section = el.closest( '.accordion-section' ),
  57              sectionToggleControl = section.find( '[aria-expanded]' ).first(),
  58              container = section.closest( '.accordion-container' ),
  59              siblings = container.find( '.open' ),
  60              siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(),
  61              content = section.find( '.accordion-section-content' );
  62  
  63          // This section has no content and cannot be expanded.
  64          if ( section.hasClass( 'cannot-expand' ) ) {
  65              return;
  66          }
  67  
  68          // Add a class to the container to let us know something is happening inside.
  69          // This helps in cases such as hiding a scrollbar while animations are executing.
  70          container.addClass( 'opening' );
  71  
  72          if ( section.hasClass( 'open' ) ) {
  73              section.toggleClass( 'open' );
  74              content.toggle( true ).slideToggle( 150 );
  75          } else {
  76              siblingsToggleControl.attr( 'aria-expanded', 'false' );
  77              siblings.removeClass( 'open' );
  78              siblings.find( '.accordion-section-content' ).show().slideUp( 150 );
  79              content.toggle( false ).slideToggle( 150 );
  80              section.toggleClass( 'open' );
  81          }
  82  
  83          // We have to wait for the animations to finish.
  84          setTimeout(function(){
  85              container.removeClass( 'opening' );
  86          }, 150);
  87  
  88          // If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value.
  89          if ( sectionToggleControl ) {
  90              sectionToggleControl.attr( 'aria-expanded', String( sectionToggleControl.attr( 'aria-expanded' ) === 'false' ) );
  91          }
  92      }
  93  
  94  })(jQuery);