Toggle All Text Blocks
The second part of this plugin is the tt_all shortcode.
1 | [tt_all] |
This shortcode creates a jQuery-mapped link that alternately shows and hides all content defined by the tt shortcode throughout the given page or post. This singleton shortcode does not require any parameters or content.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function avp_texttoggle_all_shortcode() { $return = ”; wp_enqueue_script( ‘avp-texttoggle-js-all’ ); wp_enqueue_style( ‘avp-texttoggle-css’ ); $return .= ‘<div>’; $return .= ‘<a href=“javascript:void(0);” title=“Click here to show or hide all text.” class=“tt-link-all” >’; $return .= ‘<span class=“tt-span tt-span-all-show”>►</span>’; $return .= ‘<span class=“tt-span tt-span-all-hide”>▼</span>’; $return .= ‘ Show / Hide All</a>’; $return .= ‘</div>’; return( $return ); } |
The shortcode creates a standalone link that triggers a jQuery function to do all the work. This jQuery function reads the display status of the ‘hide’ indicator character of the parent link, which is initially hidden, and thereby determines whether to show or hide the indicator characters and the text boxes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | jQuery( ‘a.tt-link-all’ ).click( function() { // If the ‘hide’ character is not visible (still set to ‘display:none;’) // Then the sections are hidden and need to be shown // Else the sections are shown and need to be hidden if ( jQuery(this).children( ‘span.tt-span-all-hide’ ).css( ‘display’ ) === ‘none’ ) { jQuery(document).find( ‘div.tt-div’ ).show(); jQuery(document).find( ‘span.tt-span-hide’ ).show(); jQuery(document).find( ‘span.tt-span-show’ ).hide(); jQuery(document).find( ‘span.tt-span-all-hide’ ).show(); jQuery(document).find( ‘span.tt-span-all-show’ ).hide(); jQuery(document).find( ‘span.tt-span-part-hide’ ).show(); jQuery(document).find( ‘span.tt-span-part-show’ ).hide(); } else { jQuery(document).find( ‘div.tt-div’ ).hide(); jQuery(document).find( ‘span.tt-span-hide’ ).hide(); jQuery(document).find( ‘span.tt-span-show’ ).show(); jQuery(document).find( ‘span.tt-span-all-hide’ ).hide(); jQuery(document).find( ‘span.tt-span-all-show’ ).show(); jQuery(document).find( ‘span.tt-span-part-hide’ ).hide(); jQuery(document).find( ‘span.tt-span-part-show’ ).show(); } }); |
This shortcode may be placed anywhere on the page and placed multiple times on the same page. Because of the script and style file queuing functionality, only one instance of each file will be added to the page.
Personal Links