| author | ymh <ymh.work@gmail.com> |
| Mon, 14 Oct 2019 17:39:30 +0200 | |
| changeset 7 | cf61fcea0001 |
| parent 5 | 5e2f62d02dcd |
| child 9 | 177826044cd9 |
| 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 |
* |
|
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' ), |
|
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
56 |
sectionToggleControl = section.find( '[aria-expanded]' ).first(), |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
57 |
container = section.closest( '.accordion-container' ), |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
58 |
siblings = container.find( '.open' ), |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
59 |
siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(), |
| 5 | 60 |
content = section.find( '.accordion-section-content' ); |
| 0 | 61 |
|
| 5 | 62 |
// This section has no content and cannot be expanded. |
63 |
if ( section.hasClass( 'cannot-expand' ) ) { |
|
| 0 | 64 |
return; |
| 5 | 65 |
} |
| 0 | 66 |
|
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
67 |
// 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
|
68 |
// 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
|
69 |
container.addClass( 'opening' ); |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
70 |
|
| 0 | 71 |
if ( section.hasClass( 'open' ) ) { |
72 |
section.toggleClass( 'open' ); |
|
73 |
content.toggle( true ).slideToggle( 150 ); |
|
74 |
} else { |
|
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
75 |
siblingsToggleControl.attr( 'aria-expanded', 'false' ); |
| 0 | 76 |
siblings.removeClass( 'open' ); |
| 5 | 77 |
siblings.find( '.accordion-section-content' ).show().slideUp( 150 ); |
| 0 | 78 |
content.toggle( false ).slideToggle( 150 ); |
79 |
section.toggleClass( 'open' ); |
|
80 |
} |
|
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
81 |
|
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
82 |
// We have to wait for the animations to finish |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
83 |
setTimeout(function(){ |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
84 |
container.removeClass( 'opening' ); |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
85 |
}, 150); |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
86 |
|
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
87 |
// 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
|
88 |
if ( sectionToggleControl ) { |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
89 |
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
|
90 |
} |
| 0 | 91 |
} |
92 |
||
93 |
})(jQuery); |