2 * Accordion-folding functionality.
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:
8 * <div class="accordion-container">
9 * <div class="accordion-section open">
10 * <h3 class="accordion-section-title"></h3>
11 * <div class="accordion-section-content">
14 * <div class="accordion-section">
15 * <h3 class="accordion-section-title"></h3>
16 * <div class="accordion-section-content">
19 * <div class="accordion-section">
20 * <h3 class="accordion-section-title"></h3>
21 * <div class="accordion-section-content">
26 * Note that any appropriate tags may be used, as long as the above classes are present.
33 $( document ).ready( function () {
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
41 e.preventDefault(); // Keep this AFTER the key filter above
43 accordionSwitch( $( this ) );
49 * Close the current accordion section and open a new one.
51 * @param {Object} el Title element of the accordion section to toggle.
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' );
62 // This section has no content and cannot be expanded.
63 if ( section.hasClass( 'cannot-expand' ) ) {
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' );
71 if ( section.hasClass( 'open' ) ) {
72 section.toggleClass( 'open' );
73 content.toggle( true ).slideToggle( 150 );
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' );
82 // We have to wait for the animations to finish
83 setTimeout(function(){
84 container.removeClass( 'opening' );
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' ) );