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.
33 $( document ).ready( function () {
35 // Expand/Collapse accordion sections on click.
36 $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) {
37 if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key
41 e.preventDefault(); // Keep this AFTER the key filter above
43 accordionSwitch( $( this ) );
49 * Close the current accordion section and open a new one.
51 * @param {Object} el Title element of the accordion section to toggle.
54 function accordionSwitch ( el ) {
55 var section = el.closest( '.accordion-section' ),
56 siblings = section.closest( '.accordion-container' ).find( '.open' ),
57 content = section.find( '.accordion-section-content' );
59 // This section has no content and cannot be expanded.
60 if ( section.hasClass( 'cannot-expand' ) ) {
64 if ( section.hasClass( 'open' ) ) {
65 section.toggleClass( 'open' );
66 content.toggle( true ).slideToggle( 150 );
68 siblings.removeClass( 'open' );
69 siblings.find( '.accordion-section-content' ).show().slideUp( 150 );
70 content.toggle( false ).slideToggle( 150 );
71 section.toggleClass( 'open' );