How to reveal hidden blocks on WordPress posts

Let’s imagine this scenario. We have a group of speakers and we want to show a few lines about who they are and what they do, followed by a large chunk of information. But, we want this block to remain hidden until visitors click on a More Info link. We’re going to create this using WordPress’ shortcodes a bit of jQuery magic.

What we are going to do is to create a new shortcode to wrap the large chunk of information within it. Our shortcode name will be aptly named [moreinfo] and in order to create it we need to add the following code to your functions.php file.

/**
* Shortcode: [moreinfo]
*/
/* Variable to count shortcode instances
In this way we can place many "More Info" blocks.
*/
$scid = 0;

/* Function that executes the shortcode
   We're not going to use any attributes, only the content.
*/
function ilc_moreinfo_sc($atts, $content = null){
   // We call the variable we defined earlier
   global $scid;

   /* Creates the More Info text link
      We use the $scid variable to reference this anchor.
   */
   $html .= "<a class='moreinfo-btn moreinfo-btn-{$scid}>'More Info</a>";
   /* Wraps the $content with divs
      Again, we use the $scid variable to reference this section
   */
   $html .= "<div class='moreinfo-section moreinfo-section-{$scid}'>";
     $html .= $content;
   $html .= '</div>';

   /* Begin writing the script
      We're writing custom scripts for each "More Info" block
      because in this way we can target each button and each section
   */
   $html .= "<script type='text/javascript'>";
   $html .= "jQuery(document).ready(function(){ ";
     // Attach a click event to the link referenced by $scid
     $html .= "jQuery('.moreinfo-btn-{$scid}').click(function(event){";
     // Prevent anchor jump, just in case
     $html .= "event.preventDefault();";
     // Reveal the section referenced by $scid
     $html .= "jQuery('.moreinfo-section-{$scid}').slideDown('fast');";
     // Hide the "More Info" link
     $html .= "jQuery(this).hide();";
     $html .= "});";
   $html .= "});";
   $html .= "</script>";

   // Increment $scid to the next shortcode
   $scid = $scid + 1;

   // Return the shortcode html
   return $html;
}
// Enables the moreinfo shortcode to be used
add_shortcode('moreinfo', 'ilc_moreinfo_sc');

In this script we are hiding the More Info link once it’s been clicked, but you could remove the hiding step and change the slideDown action to slideToggle to reveal and hide the info block. We need somce CSS but it’s just to hide the large info blocks.

.moreinfo-section{
   display: none;
}
.moreinfo-btn{
   //use this rule to stylize to your More Info button
}

Remember that this shortcode uses jQuery and hence you need it to be loaded. In case jQuery is not loaded just add the following to your functions.php file:

add_action('after_setup_theme', 'enqueue_my_script');
function enqueue_my_script(){
   wp_enqueue_script("jquery");
}

Now we’re completely sure that jQuery is loaded and your “More Info” buttons will work revealing those hidden chunks of text. You can see a live sample here, click on the “Ver Más” links after the first few lines of info for each speaker.

• WordPress 3.0 Menu Management UI
• Creating Rotating Tabs using jQuery
• Collapsible Panel
• Installed fonts in Win, Mac & Linux
• Firefox Aurora introduces native developer tools

Tags: development, usability. Categories: WordPress.
Monday, August 2nd, 2010.