2 * Accordion-folding functionality.
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:
8 * <div class="accordion-container">
9 * <div class="accordion-section open">
10 * <h3 class="accordion-section-title"></h3>
11 * <div class="accordion-section-content">
14 * <div class="accordion-section">
15 * <h3 class="accordion-section-title"></h3>
16 * <div class="accordion-section-content">
19 * <div class="accordion-section">
20 * <h3 class="accordion-section-title"></h3>
21 * <div class="accordion-section-content">
26 * Note that any appropriate tags may be used, as long as the above classes are present.
28 * In addition to the standard accordion behavior, this file includes JS for the
29 * Customizer's "Panel" functionality.
36 $( document ).ready( function () {
38 // Expand/Collapse accordion sections on click.
39 $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) {
40 if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key
44 e.preventDefault(); // Keep this AFTER the key filter above
46 accordionSwitch( $( this ) );
49 // Go back to the top-level Customizer accordion.
50 $( '#customize-header-actions' ).on( 'click keydown', '.control-panel-back', function( e ) {
51 if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key
55 e.preventDefault(); // Keep this AFTER the key filter above
57 panelSwitch( $( '.current-panel' ) );
61 var sectionContent = $( '.accordion-section-content' );
64 * Close the current accordion section and open a new one.
66 * @param {Object} el Title element of the accordion section to toggle.
69 function accordionSwitch ( el ) {
70 var section = el.closest( '.accordion-section' ),
71 siblings = section.closest( '.accordion-container' ).find( '.open' ),
72 content = section.find( sectionContent );
74 // This section has no content and cannot be expanded.
75 if ( section.hasClass( 'cannot-expand' ) ) {
79 // Slide into a sub-panel instead of accordioning (Customizer-specific).
80 if ( section.hasClass( 'control-panel' ) ) {
81 panelSwitch( section );
85 if ( section.hasClass( 'open' ) ) {
86 section.toggleClass( 'open' );
87 content.toggle( true ).slideToggle( 150 );
89 siblings.removeClass( 'open' );
90 siblings.find( sectionContent ).show().slideUp( 150 );
91 content.toggle( false ).slideToggle( 150 );
92 section.toggleClass( 'open' );
97 * Slide into an accordion sub-panel.
99 * For the Customizer-specific panel functionality
101 * @param {Object} panel Title element or back button of the accordion panel to toggle.
104 function panelSwitch( panel ) {
105 var position, scroll,
106 section = panel.closest( '.accordion-section' ),
107 overlay = section.closest( '.wp-full-overlay' ),
108 container = section.closest( '.accordion-container' ),
109 siblings = container.find( '.open' ),
110 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
111 backBtn = overlay.find( '.control-panel-back' ),
112 panelTitle = section.find( '.accordion-section-title' ).first(),
113 content = section.find( '.control-panel-content' );
115 if ( section.hasClass( 'current-panel' ) ) {
116 section.toggleClass( 'current-panel' );
117 overlay.toggleClass( 'in-sub-panel' );
118 content.delay( 180 ).hide( 0, function() {
119 content.css( 'margin-top', 'inherit' ); // Reset
121 topPanel.attr( 'tabindex', '0' );
122 backBtn.attr( 'tabindex', '-1' );
124 container.scrollTop( 0 );
126 // Close all open sections in any accordion level.
127 siblings.removeClass( 'open' );
128 siblings.find( sectionContent ).show().slideUp( 0 );
129 content.show( 0, function() {
130 position = content.offset().top;
131 scroll = container.scrollTop();
132 content.css( 'margin-top', ( 45 - position - scroll ) );
133 section.toggleClass( 'current-panel' );
134 overlay.toggleClass( 'in-sub-panel' );
135 container.scrollTop( 0 );
137 topPanel.attr( 'tabindex', '-1' );
138 backBtn.attr( 'tabindex', '0' );