[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   * @example
   9   * ```html
  10   * <div class="accordion-container">
  11   *    <div class="accordion-section open">
  12   *        <h3 class="accordion-section-title"><button type="button" aria-expanded="true" aria-controls="target-1"></button></h3>
  13   *        <div class="accordion-section-content" id="target">
  14   *        </div>
  15   *    </div>
  16   *    <div class="accordion-section">
  17   *        <h3 class="accordion-section-title"><button type="button" aria-expanded="false" aria-controls="target-2"></button></h3>
  18   *        <div class="accordion-section-content" id="target-2">
  19   *        </div>
  20   *    </div>
  21   *    <div class="accordion-section">
  22   *        <h3 class="accordion-section-title"><button type="button" aria-expanded="false" aria-controls="target-3"></button></h3>
  23   *        <div class="accordion-section-content" id="target-3">
  24   *        </div>
  25   *    </div>
  26   * </div>
  27   * ```
  28   *
  29   * Note that any appropriate tags may be used, as long as the above classes are present.
  30   *
  31   * @since 3.6.0
  32   * @output wp-admin/js/accordion.js
  33   */
  34  
  35  /**
  36   * Handles the accordion functionality.
  37   *
  38   * @param {JQueryStatic} $ The jQuery object.
  39   */
  40  ( function( $ ){
  41  
  42      $( function () {
  43  
  44          // Expand/Collapse accordion sections on click.
  45          $( '.accordion-container' ).on( 'click', '.accordion-section-title button', function() {
  46              accordionSwitch( $( this ) );
  47          });
  48  
  49      });
  50  
  51      /**
  52       * Close the current accordion section and open a new one.
  53       *
  54       * @param {Object} el Title element of the accordion section to toggle.
  55       * @since 3.6.0
  56       */
  57  	function accordionSwitch ( el ) {
  58          var section = el.closest( '.accordion-section' ),
  59              container = section.closest( '.accordion-container' ),
  60              siblings = container.find( '.open' ),
  61              siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(),
  62              content = section.find( '.accordion-section-content' );
  63  
  64          // This section has no content and cannot be expanded.
  65          if ( section.hasClass( 'cannot-expand' ) ) {
  66              return;
  67          }
  68  
  69          // Add a class to the container to let us know something is happening inside.
  70          // This helps in cases such as hiding a scrollbar while animations are executing.
  71          container.addClass( 'opening' );
  72  
  73          if ( section.hasClass( 'open' ) ) {
  74              section.toggleClass( 'open' );
  75              content.toggle( true ).slideToggle( 150 );
  76          } else {
  77              siblingsToggleControl.attr( 'aria-expanded', 'false' );
  78              siblings.removeClass( 'open' );
  79              siblings.find( '.accordion-section-content' ).show().slideUp( 150 );
  80              content.toggle( false ).slideToggle( 150 );
  81              section.toggleClass( 'open' );
  82          }
  83  
  84          // We have to wait for the animations to finish.
  85          setTimeout(function(){
  86              container.removeClass( 'opening' );
  87          }, 150);
  88  
  89          // If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value.
  90          if ( el ) {
  91              el.attr( 'aria-expanded', String( el.attr( 'aria-expanded' ) === 'false' ) );
  92          }
  93      }
  94  
  95  })(jQuery);