5 * with one section opening at a time when its title is clicked. |
5 * with one section opening at a time when its title is clicked. |
6 * Use the following markup structure for accordion behavior: |
6 * Use the following markup structure for accordion behavior: |
7 * |
7 * |
8 * <div class="accordion-container"> |
8 * <div class="accordion-container"> |
9 * <div class="accordion-section open"> |
9 * <div class="accordion-section open"> |
10 * <h3 class="accordion-section-title"></h3> |
10 * <h3 class="accordion-section-title"><button type="button" aria-expanded="true" aria-controls="target-1"></button></h3> |
11 * <div class="accordion-section-content"> |
11 * <div class="accordion-section-content" id="target"> |
12 * </div> |
12 * </div> |
13 * </div> |
13 * </div> |
14 * <div class="accordion-section"> |
14 * <div class="accordion-section"> |
15 * <h3 class="accordion-section-title"></h3> |
15 * <h3 class="accordion-section-title"><button type="button" aria-expanded="false" aria-controls="target-2"></button></h3> |
16 * <div class="accordion-section-content"> |
16 * <div class="accordion-section-content" id="target-2"> |
17 * </div> |
17 * </div> |
18 * </div> |
18 * </div> |
19 * <div class="accordion-section"> |
19 * <div class="accordion-section"> |
20 * <h3 class="accordion-section-title"></h3> |
20 * <h3 class="accordion-section-title"><button type="button" aria-expanded="false" aria-controls="target-3"></button></h3> |
21 * <div class="accordion-section-content"> |
21 * <div class="accordion-section-content" id="target-3"> |
22 * </div> |
22 * </div> |
23 * </div> |
23 * </div> |
24 * </div> |
24 * </div> |
25 * |
25 * |
26 * Note that any appropriate tags may be used, as long as the above classes are present. |
26 * Note that any appropriate tags may be used, as long as the above classes are present. |
32 ( function( $ ){ |
32 ( function( $ ){ |
33 |
33 |
34 $( function () { |
34 $( function () { |
35 |
35 |
36 // Expand/Collapse accordion sections on click. |
36 // Expand/Collapse accordion sections on click. |
37 $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) { |
37 $( '.accordion-container' ).on( 'click', '.accordion-section-title button', function() { |
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 ) ); |
38 accordionSwitch( $( this ) ); |
45 }); |
39 }); |
46 |
40 |
47 }); |
41 }); |
48 |
42 |
52 * @param {Object} el Title element of the accordion section to toggle. |
46 * @param {Object} el Title element of the accordion section to toggle. |
53 * @since 3.6.0 |
47 * @since 3.6.0 |
54 */ |
48 */ |
55 function accordionSwitch ( el ) { |
49 function accordionSwitch ( el ) { |
56 var section = el.closest( '.accordion-section' ), |
50 var section = el.closest( '.accordion-section' ), |
57 sectionToggleControl = section.find( '[aria-expanded]' ).first(), |
|
58 container = section.closest( '.accordion-container' ), |
51 container = section.closest( '.accordion-container' ), |
59 siblings = container.find( '.open' ), |
52 siblings = container.find( '.open' ), |
60 siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(), |
53 siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(), |
61 content = section.find( '.accordion-section-content' ); |
54 content = section.find( '.accordion-section-content' ); |
62 |
55 |
84 setTimeout(function(){ |
77 setTimeout(function(){ |
85 container.removeClass( 'opening' ); |
78 container.removeClass( 'opening' ); |
86 }, 150); |
79 }, 150); |
87 |
80 |
88 // If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value. |
81 // 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 ) { |
82 if ( el ) { |
90 sectionToggleControl.attr( 'aria-expanded', String( sectionToggleControl.attr( 'aria-expanded' ) === 'false' ) ); |
83 el.attr( 'aria-expanded', String( el.attr( 'aria-expanded' ) === 'false' ) ); |
91 } |
84 } |
92 } |
85 } |
93 |
86 |
94 })(jQuery); |
87 })(jQuery); |