Toggle a Single Text Block
The first part of this plugin is the tt shortcode. The format is:
1 | [tt title=“Title” class=“optional”][/tt] |
The shortcode is used like this:
1 | [tt title=“Art Show Assistant” class=“volunteer”]Act as volunteer assistant for the art show at MediaWest*Con, a science fiction and fantasy media convention in East Lansing, Michigan. Responsibilities include overseeing the after show processing of artwork including dividing the sold and unsold artwork from the artwork held for auction, overseeing the staff sorting the artwork to be auctioned into lots such that no artist, subject or art form dominates any single lot, transport the artwork by lot to the auction area, update the auction listings to show which lot is being auctioned, retrieve auctioned artwork for post-auction processing, make announcements as necessary during the art auction, auction specialty items as necessary during the auction and keep the art show staff updated on events during the auction.[/tt] |
This shortcode takes a title parameter definition and content and an optional class parameter definition and creates a jQuery-mapped parent link that alternately shows and hides whatever content exists within the shortcode when the parent link is clicked. Both the title parameter and the content are required although the class parameter is not, but the latter is necessary for partial or sub-lists when using the tt_part shortcode.
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 27 28 29 30 31 32 33 34 35 36 37 38 | function avp_texttoggle_shortcode( $attributes, $content = null ) { $return = ”; extract( shortcode_atts( array( ‘class’ => null, ‘title’ => null ), $attributes ) ); if ( ( ! is_null( $title ) ) && ( ! is_null( $content ) ) ) { wp_enqueue_script( ‘avp-texttoggle-js’ ); wp_enqueue_style( ‘avp-texttoggle-css’ ); $return .= ‘<a href=“javascript:void(0);” title=“Click here to show or hide text.” class=“tt-link”>’; if ( ( ! is_null( $class ) ) && ctype_alnum( $class ) ) { $return .= ‘<span class=“tt-span tt-span-show tt-span-show-’ . $class . ’ ”>►</span>’; $return .= ‘<span class=“tt-span tt-span-hide tt-span-hide-’ . $class . ’ ”>▼</span>’; } else { $return .= ‘<span class=“tt-span tt-span-show”>►</span>’; $return .= ‘<span class=“tt-span tt-span-hide”>▼</span>’; } $return .= ‘ ’ . $title . ‘</a>’; if ( ( ! is_null( $class ) ) && ctype_alnum( $class ) ) { $return .= ‘<div class=“tt-div tt-div-’ . $class . ’ ”>’ . $content . ‘</div>’; } else { $return .= ‘<div class=“tt-div”>’ . $content . ‘</div>’; } } return( $return ); } |
The plugin functionality depends on the jQuery-mapped link manipulating the child <span> elements and the following <div> element through their position within and subsequent to the link element. The “class” parameters of the <span> and <div> elements are used for the tt_part and tt_all shortcodes.
The jQuery function that performs the actual toggling of the indicator characters and the associated text block is relatively very simple.
1 2 3 4 5 | jQuery( ‘a.tt-link’ ).click( function() { jQuery(this).next( ‘div’ ).toggle(); jQuery(this).children( ‘span’ ).toggle(); }); |
The .next() function takes the next element in the page DOM structure, which is a <div> block, and toggles the display. The .children() does the same for the <span> children elements within the same DOM anchor link statement, which are the two indicator characters, and toggles them; as they are alternately shown and hidden, this toggles the indicator characters back and forth.
Personal Links