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.
[php]
/**
* 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’);
[/php]
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.
[css]
.moreinfo-section{
display: none;
}
.moreinfo-btn{
//use this rule to stylize to your More Info button
}
[/css]
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:
[php]
add_action(‘after_setup_theme’, ‘enqueue_my_script’);
function enqueue_my_script(){
wp_enqueue_script("jquery");
}
[/php]
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.
Interesting technique, but do you know what effects using it would have on SEO?
None, since the text is actually there 🙂 it’s only hidden but it’s there.
very useful article. thanks for sharign the knowledge.
Lovely tip – thanks
although I think that you have missed a closing > symbol before the ‘More info’ text
… it works for me with:
$html .= “More Info +“;
Thanks Sam for the heads up. I’ve updated the code 🙂
Nice bit of code, I had a bit of trouble getting it to work as I was silly and did not know how to use the shortcode in the editor.
[moreinfo]Put your hidden stuff here[/moreinfo]
Richard, you could mix this solution to create a button for TinyMCE for an even easier to use plugin where you will only have to select the text what you want to hide and click the button to wrap it with [moreinfo].
ah yes of course you can’t post HTML in comments.. look for the line with More Info, also moreinfo-btn moreinfo-btn and you’ll see where the quote needs to be moved.
cheers
Is this possible on wordpress.org? I need to create a page for an organization and list its board members. When someone would click on one name, it would reveal a short bio underneath. Is this possible with just html or something simple to add to the free blog service?
Thank you very much in advance!
Sorry, I meant wordpress.com (where plugins are not available)
Thank you for the article.
This line of code needs the quote to be moved to the right of the Right Curly Brace
See below
$scid}>’More In
Finally! Just what I’m looking for, but wondering. If you wanted to add the option to have it slide back up. would you remove the // Hide the “More Info” link part and add some code to jquery code to ‘slideUp’? What would that be?
Oh, and what if you wnat to customize the ‘More Info’ text for each entry? I guess not *exactly* what I was looking for, but so close!
To convert it to a toggling block, remove the line in the jQuery code that hides the “More info” text and change the slideUp to slideToggle.
To customize the “More info” text you need to extend the code to add attributes to the shortcode, as shown in the Shortcode API.
Great technique! I have learned a lot from your site!
By the way, is there a way to also toggle the button text (more info/ less info) through the code? I’m not familiar with the WordPress function
Change this
[php]$html .= "jQuery(‘.moreinfo-section-{$scid}’).slideDown(‘fast’);";[/php]
to
[php]$html .= "jQuery(‘.moreinfo-section-{$scid}’).slideToggle();";[/php]
and change
[php]$html .= "jQuery(this).hide();";[/php]
to
[php]$html .= "jQuery(this).toggleClass(‘open’);";
$html .= "if(jQuery(this).hasClass(‘open’))";
$html .= "jQuery(this).text(‘Less info’);";
$html .= "else";
$html .= "jQuery(this).text(‘More info’);";
[/php]
this is untested code, just wrote it quickly, so make sure to enter it correctly and let me know how it goes.