ru-se.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

accordion.js (2938B)

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