Text Toggle

Toggle a Single Text Block

The first part of this plugin is the tt shortcode. The format is:

The shortcode is used like this:

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.

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.

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.

The short URL of the present article is: http://www.terryobrien.me/kUWob

Page 3 of 7
First | Prev | 1 | 2 | 3 | 4 | 5 | 6 | 7 | Next | Last
View All