Toggle a Specific Set of Text Blocks
The third part of this plugin is the tt_part shortcode.
1 | [tt_part title=“Selected” class=“selected”] |
This singleton shortcode takes a title and class definition and creates a jQuery-mapped link that alternately shows and hides all tt content with the corresponding class parameter definition.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | function avp_texttoggle_part_shortcode( $attributes ) { $return = ”; extract( shortcode_atts( array( ‘title’ => null, ‘class’ => null ), $attributes ) ); if ( ( ! is_null( $title ) ) && ( ! is_null( $class ) ) && ( ctype_alnum( $class ) ) ) { wp_enqueue_script( ‘avp-texttoggle-js-part’ ); wp_enqueue_style( ‘avp-texttoggle-css’ ); $return .= ‘<div>’; $return .= ‘<a href=“javascript:void(0);” title=“Click here to show or hide all ’ . $title . ’ section text.” class=“tt-link-part” id=“ ‘ . $class . ’ ” >’; $return .= ‘<span class=“tt-span tt-span-part-show tt-span-part-show-’ . $class . ’ ”>►</span>’; $return .= ‘<span class=“tt-span tt-span-part-hide tt-span-part-hide-’ . $class . ’ ”>▼</span>’; $return .= ‘ Show / Hide All ’ . $title . ‘</a>’; $return .= ‘</div>’; } return( $return ); } |
The jQuery function is very similar to the previous function, except that it is specific to the given class as defined by the class parameter in the shortcode call.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | jQuery( ‘a.tt-link-part’ ).click( function() { $class = jQuery(this).attr( ‘id’ ); if ( jQuery(this).children( ‘span.tt-span-part-hide’ ).css( ‘display’ ) === ‘none’ ) { jQuery(document).find( ‘div.tt-div-’ + $class ).show(); jQuery(document).find( ‘span.tt-span-hide-’ + $class ).show(); jQuery(document).find( ‘span.tt-span-show-’ + $class ).hide(); jQuery(document).find( ‘span.tt-span-part-hide-’ + $class ).show(); jQuery(document).find( ‘span.tt-span-part-show-’ + $class ).hide(); } else { jQuery(document).find( ‘div.tt-div-’ + $class ).hide(); jQuery(document).find( ‘span.tt-span-hide-’ + $class ).hide(); jQuery(document).find( ‘span.tt-span-show-’ + $class ).show(); jQuery(document).find( ‘span.tt-span-part-hide-’ + $class ).hide(); jQuery(document).find( ‘span.tt-span-part-show-’ + $class ).show(); } }); |
This shortcode is optional but if it is included, the optional class definition in the tt shortcode must be defined with the same parameter for all entries controlled by this shortcode. The class definition can only consist of letters and numbers. It may be placed multiple times on the same page.
The short URL of the present article is: http://www.terryobrien.me/kUWob
Personal Links