author | ymh <ymh.work@gmail.com> |
Mon, 14 Oct 2019 18:28:13 +0200 | |
changeset 9 | 177826044cd9 |
parent 7 | cf61fcea0001 |
child 16 | a86126ab1dd4 |
permissions | -rw-r--r-- |
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 |
* |
|
9 | 28 |
* @since 3.6.0 |
29 |
* @output wp-admin/js/accordion.js |
|
5 | 30 |
*/ |
31 |
||
0 | 32 |
( function( $ ){ |
33 |
||
34 |
$( document ).ready( function () { |
|
35 |
||
5 | 36 |
// Expand/Collapse accordion sections on click. |
0 | 37 |
$( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) { |
5 | 38 |
if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key |
39 |
return; |
|
40 |
} |
|
41 |
||
0 | 42 |
e.preventDefault(); // Keep this AFTER the key filter above |
43 |
||
44 |
accordionSwitch( $( this ) ); |
|
45 |
}); |
|
46 |
||
47 |
}); |
|
48 |
||
5 | 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 |
*/ |
|
0 | 55 |
function accordionSwitch ( el ) { |
56 |
var section = el.closest( '.accordion-section' ), |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
57 |
sectionToggleControl = section.find( '[aria-expanded]' ).first(), |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
58 |
container = section.closest( '.accordion-container' ), |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
59 |
siblings = container.find( '.open' ), |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
60 |
siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(), |
5 | 61 |
content = section.find( '.accordion-section-content' ); |
0 | 62 |
|
5 | 63 |
// This section has no content and cannot be expanded. |
64 |
if ( section.hasClass( 'cannot-expand' ) ) { |
|
0 | 65 |
return; |
5 | 66 |
} |
0 | 67 |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
68 |
// Add a class to the container to let us know something is happening inside. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
69 |
// This helps in cases such as hiding a scrollbar while animations are executing. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
70 |
container.addClass( 'opening' ); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
71 |
|
0 | 72 |
if ( section.hasClass( 'open' ) ) { |
73 |
section.toggleClass( 'open' ); |
|
74 |
content.toggle( true ).slideToggle( 150 ); |
|
75 |
} else { |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
76 |
siblingsToggleControl.attr( 'aria-expanded', 'false' ); |
0 | 77 |
siblings.removeClass( 'open' ); |
5 | 78 |
siblings.find( '.accordion-section-content' ).show().slideUp( 150 ); |
0 | 79 |
content.toggle( false ).slideToggle( 150 ); |
80 |
section.toggleClass( 'open' ); |
|
81 |
} |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
82 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
83 |
// We have to wait for the animations to finish |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
84 |
setTimeout(function(){ |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
85 |
container.removeClass( 'opening' ); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
86 |
}, 150); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
87 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
88 |
// If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
89 |
if ( sectionToggleControl ) { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
90 |
sectionToggleControl.attr( 'aria-expanded', String( sectionToggleControl.attr( 'aria-expanded' ) === 'false' ) ); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
91 |
} |
0 | 92 |
} |
93 |
||
94 |
})(jQuery); |