|
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 |
1 ( function( $ ){ |
31 ( function( $ ){ |
2 |
32 |
3 $( document ).ready( function () { |
33 $( document ).ready( function () { |
4 |
34 |
5 // Expand/Collapse on click |
35 // Expand/Collapse accordion sections on click. |
6 $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) { |
36 $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) { |
7 if ( e.type === 'keydown' && 13 !== e.which ) // "return" key |
37 if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key |
8 return; |
38 return; |
|
39 } |
|
40 |
9 e.preventDefault(); // Keep this AFTER the key filter above |
41 e.preventDefault(); // Keep this AFTER the key filter above |
10 |
42 |
11 accordionSwitch( $( this ) ); |
43 accordionSwitch( $( this ) ); |
12 }); |
44 }); |
13 |
45 |
14 // Re-initialize accordion when screen options are toggled |
|
15 $( '.hide-postbox-tog' ).click( function () { |
|
16 accordionInit(); |
|
17 }); |
|
18 |
|
19 }); |
46 }); |
20 |
47 |
21 var accordionOptions = $( '.accordion-container li.accordion-section' ), |
48 /** |
22 sectionContent = $( '.accordion-section-content' ); |
49 * Close the current accordion section and open a new one. |
23 |
50 * |
24 function accordionInit () { |
51 * @param {Object} el Title element of the accordion section to toggle. |
25 // Rounded corners |
52 * @since 3.6.0 |
26 accordionOptions.removeClass( 'top bottom' ); |
53 */ |
27 accordionOptions.filter( ':visible' ).first().addClass( 'top' ); |
|
28 accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass( 'bottom' ); |
|
29 } |
|
30 |
|
31 function accordionSwitch ( el ) { |
54 function accordionSwitch ( el ) { |
32 var section = el.closest( '.accordion-section' ), |
55 var section = el.closest( '.accordion-section' ), |
33 siblings = section.closest( '.accordion-container' ).find( '.open' ), |
56 siblings = section.closest( '.accordion-container' ).find( '.open' ), |
34 content = section.find( sectionContent ); |
57 content = section.find( '.accordion-section-content' ); |
35 |
58 |
36 if ( section.hasClass( 'cannot-expand' ) ) |
59 // This section has no content and cannot be expanded. |
|
60 if ( section.hasClass( 'cannot-expand' ) ) { |
37 return; |
61 return; |
|
62 } |
38 |
63 |
39 if ( section.hasClass( 'open' ) ) { |
64 if ( section.hasClass( 'open' ) ) { |
40 section.toggleClass( 'open' ); |
65 section.toggleClass( 'open' ); |
41 content.toggle( true ).slideToggle( 150 ); |
66 content.toggle( true ).slideToggle( 150 ); |
42 } else { |
67 } else { |
43 siblings.removeClass( 'open' ); |
68 siblings.removeClass( 'open' ); |
44 siblings.find( sectionContent ).show().slideUp( 150 ); |
69 siblings.find( '.accordion-section-content' ).show().slideUp( 150 ); |
45 content.toggle( false ).slideToggle( 150 ); |
70 content.toggle( false ).slideToggle( 150 ); |
46 section.toggleClass( 'open' ); |
71 section.toggleClass( 'open' ); |
47 } |
72 } |
48 |
|
49 accordionInit(); |
|
50 } |
73 } |
51 |
74 |
52 // Initialize the accordion (currently just corner fixes) |
|
53 accordionInit(); |
|
54 |
|
55 })(jQuery); |
75 })(jQuery); |