|
5
|
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 |
*/ |
|
|
30 |
|
|
0
|
31 |
( function( $ ){ |
|
|
32 |
|
|
|
33 |
$( document ).ready( function () { |
|
|
34 |
|
|
5
|
35 |
// Expand/Collapse accordion sections on click. |
|
0
|
36 |
$( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) { |
|
5
|
37 |
if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key |
|
|
38 |
return; |
|
|
39 |
} |
|
|
40 |
|
|
0
|
41 |
e.preventDefault(); // Keep this AFTER the key filter above |
|
|
42 |
|
|
|
43 |
accordionSwitch( $( this ) ); |
|
|
44 |
}); |
|
|
45 |
|
|
|
46 |
}); |
|
|
47 |
|
|
5
|
48 |
/** |
|
|
49 |
* Close the current accordion section and open a new one. |
|
|
50 |
* |
|
|
51 |
* @param {Object} el Title element of the accordion section to toggle. |
|
|
52 |
* @since 3.6.0 |
|
|
53 |
*/ |
|
0
|
54 |
function accordionSwitch ( el ) { |
|
|
55 |
var section = el.closest( '.accordion-section' ), |
|
|
56 |
siblings = section.closest( '.accordion-container' ).find( '.open' ), |
|
5
|
57 |
content = section.find( '.accordion-section-content' ); |
|
0
|
58 |
|
|
5
|
59 |
// This section has no content and cannot be expanded. |
|
|
60 |
if ( section.hasClass( 'cannot-expand' ) ) { |
|
0
|
61 |
return; |
|
5
|
62 |
} |
|
0
|
63 |
|
|
|
64 |
if ( section.hasClass( 'open' ) ) { |
|
|
65 |
section.toggleClass( 'open' ); |
|
|
66 |
content.toggle( true ).slideToggle( 150 ); |
|
|
67 |
} else { |
|
|
68 |
siblings.removeClass( 'open' ); |
|
5
|
69 |
siblings.find( '.accordion-section-content' ).show().slideUp( 150 ); |
|
0
|
70 |
content.toggle( false ).slideToggle( 150 ); |
|
|
71 |
section.toggleClass( 'open' ); |
|
|
72 |
} |
|
|
73 |
} |
|
|
74 |
|
|
|
75 |
})(jQuery); |