News
How to: Show/Hide any div box with jQuery in WordPress
If you take a look at my current sidebar (right) and see the heading Google Search you’ll notice that when you click it the Google Search box show’s into view.
Let me show you how this is done.
First make sure that your WordPress site is calling jQuery, buy pluggin this code into our header.php file above the <?php wp_head(); ?> text:
<?php wp_enqueue_script('jquery'); ?>
Then anywhere above the </head >, plug this code in:
<script type="text/javascript">
jQuery(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
jQuery('#toggle-search').hide();
// toggles the slickbox on clicking the noted link
jQuery('a#slick-slidetoggle').click(function() {
jQuery('#toggle-search').slideToggle(400);
return false;
});
});
</script>
That’s simple, huh. Okay now lets write the Search code:
<h2><a href="#" id="slick-slidetoggle">Google Search</a></h2>
<div id="toggle-search" style="padding:10px;">
<form method="get" id="search" action="<?php bloginfo('home'); ?>/">
<div>
<input type="text" value="Enter Keyword" onclick="this.value='';" name="s" id="s" />
<input type="text" name="search-button" id="search-button" value="<?php _e('Search') ?>" />
</div>
</form>
</div>
That’s it.
I have show you how to create a custom widget in a previous post. But how about adding and additional “Archives” widget that won’t list the last 3 years (if you’ve been around that long) in month form stretching down your whole sidebar?
Well, lets take a look at the original code found in the widgets.php file in the ./wp-includes/ folder.
<?php
/**
* Display archives widget.
*
* @since 2.2.0
*
* @param array $args Widget arguments.
*/
function wp_widget_archives($args) {
extract($args);
$options = get_option('widget_archives');
$c = $options['count'] ? '1' : '0';
$d = $options['dropdown'] ? '1' : '0';
$title = empty($options['title']) ? __('Archives') : apply_filters('widget_title', $options['title']);
echo $before_widget;
echo $before_title . $title . $after_title;
if($d) {
?>
<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> <option value=""><?php echo attribute_escape(__('Select Month')); ?></option> <?php wp_get_archives("type=monthly&format=option&show_post_count=$c"); ?> </select>
<?php
} else {
?>
<ul>
<?php wp_get_archives("type=monthly&show_post_count=$c"); ?>
</ul>
<?php
}
echo $after_widget;
}
/**
* Display and process archives widget options form.
*
* @since 2.2.0
*/
function wp_widget_archives_control() {
$options = $newoptions = get_option('widget_archives');
if ( isset($_POST["archives-submit"]) ) {
$newoptions['count'] = isset($_POST['archives-count']);
$newoptions['dropdown'] = isset($_POST['archives-dropdown']);
$newoptions['title'] = strip_tags(stripslashes($_POST["archives-title"]));
}
if ( $options != $newoptions ) {
$options = $newoptions;
update_option('widget_archives', $options);
}
$count = $options['count'] ? 'checked="checked"' : '';
$dropdown = $options['dropdown'] ? 'checked="checked"' : '';
$title = attribute_escape($options['title']);
?>
<p><label for="archives-title"><?php _e('Title:'); ?> <input class="widefat" id="archives-title" name="archives-title" type="text" value="<?php echo $title; ?>" /></label></p>
<p>
<label for="archives-count"><input class="checkbox" type="checkbox" <?php echo $count; ?> id="archives-count" name="archives-count" /> <?php _e('Show post counts'); ?></label>
<br />
<label for="archives-dropdown"><input class="checkbox" type="checkbox" <?php echo $dropdown; ?> id="archives-dropdown" name="archives-dropdown" /> <?php _e('Display as a drop down'); ?></label>
</p>
<input type="hidden" id="archives-submit" name="archives-submit" value="1" />
<?php } ?>
Simple enough? Or not..
Anyway lets just add on and change a few things. Then will add the final code to your functions.php file.
Okay, starting with the first function: wp_widget_archive and rename to widget_archive_limit
Should look like this now:
function widget_archives_limit($args) {
Then under the this line:
$title = empty($options['title']) ? __('Archives') : apply_filters('widget_title', $options['title']);
Add:
$limit = empty($options['limit']) ? __('Limit') : apply_filters('widget_limit', $options['limit']);
At this line:
<?php wp_get_archives("type=monthly&format=option&show_post_count=$c&limit=$limit"); ?>
We have added in &limit=$limit. The same goes for the second wp_get_archives:
<?php wp_get_archives("type=monthly&show_post_count=$c&limit=$limit"); ?>
At the end of this code add:
wp_register_sidebar_widget('archives limit', __('Archives Limit'), 'widget_archives_limit', $widget_ops);
The whole code should look like this:
function widget_archives_limit($args) {
extract($args);
$options = get_option('widget_archives');
$c = $options['count'] ? '1' : '0';
$d = $options['dropdown'] ? '1' : '0';
$title = empty($options['title']) ? __('Archives') : apply_filters('widget_title', $options['title']);
$limit = empty($options['limit']) ? __('Limit') : apply_filters('widget_limit', $options['limit']);
echo $before_widget;
echo $before_title . $title . $after_title;
if($d) {
?>
<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> <option value=""><?php echo attribute_escape(__('Select Month')); ?></option> <?php wp_get_archives("type=monthly&format=option&show_post_count=$c&limit=$limit"); ?> </select>
<?php
} else {
?>
<ul>
<?php wp_get_archives("type=monthly&show_post_count=$c&limit=$limit"); ?>
</ul>
<?php
}
echo $after_widget;
}
wp_register_sidebar_widget('archives limit', __('Archives Limit'), 'widget_archives_limit', $widget_ops);
That takes care of the widget its self, now we need to create the controls. Once again find the second function and change wp_widget_archive_control to widget_archives_limit_control
Find this line:
$newoptions['title'] = strip_tags(stripslashes($_POST["archives-title"]));
and add this line below:
$newoptions['limit'] = strip_tags(stripslashes($_POST["archives-limit"]));
Then find this line:
$title = attribute_escape($options['title']);
and add this line below:
$limit = attribute_escape($options['limit']);
Finally look for this line:
<label for="archives-dropdown"><input class="checkbox" type="checkbox" <?php echo $dropdown; ?> id="archives-dropdown" name="archives-dropdown" /> <?php _e('Display as a drop down'); ?></label>
</p>
and add this line below:
<p><label for="archives-limit"><?php _e('Limit (enter a number):'); ?> <input class="widefat" id="archives-limit" name="archives-limit" type="text" value="<?php echo $limit; ?>" /></label></p>
then register the widget controls:
wp_register_widget_control('archives limit', __('Archives Limit'), 'widget_archives_limit_control' );
The code should look like this:
function widget_archives_limit_control() {
$options = $newoptions = get_option('widget_archives');
if ( isset($_POST["archives-submit"]) ) {
$newoptions['count'] = isset($_POST['archives-count']);
$newoptions['dropdown'] = isset($_POST['archives-dropdown']);
$newoptions['title'] = strip_tags(stripslashes($_POST["archives-title"]));
$newoptions['limit'] = strip_tags(stripslashes($_POST["archives-limit"]));
}
if ( $options != $newoptions ) {
$options = $newoptions;
update_option('widget_archives', $options);
}
$count = $options['count'] ? 'checked="checked"' : '';
$dropdown = $options['dropdown'] ? 'checked="checked"' : '';
$title = attribute_escape($options['title']);
$limit = attribute_escape($options['limit']);
?>
<p><label for="archives-title"><?php _e('Title:'); ?> <input class="widefat" id="archives-title" name="archives-title" type="text" value="<?php echo $title; ?>" /></label></p>
<p>
<label for="archives-count"><input class="checkbox" type="checkbox" <?php echo $count; ?> id="archives-count" name="archives-count" /> <?php _e('Show post counts'); ?></label>
<br />
<label for="archives-dropdown"><input class="checkbox" type="checkbox" <?php echo $dropdown; ?> id="archives-dropdown" name="archives-dropdown" /> <?php _e('Display as a drop down'); ?></label>
</p>
<p><label for="archives-limit"><?php _e('Limit (enter a number):'); ?> <input class="widefat" id="archives-limit" name="archives-limit" type="text" value="<?php echo $limit; ?>" /></label></p>
<input type="hidden" id="archives-submit" name="archives-submit" value="1" />
<?php }
wp_register_widget_control('archives limit', __('Archives Limit'), 'widget_archives_limit_control' );
The final code:
/**
* Display archives widget.
*
* @since 2.2.0
*
* @param array $args Widget arguments.
*/
function widget_archives_limit($args) {
extract($args);
$options = get_option('widget_archives');
$c = $options['count'] ? '1' : '0';
$d = $options['dropdown'] ? '1' : '0';
$title = empty($options['title']) ? __('Archives') : apply_filters('widget_title', $options['title']);
$limit = empty($options['limit']) ? __('Limit') : apply_filters('widget_limit', $options['limit']);
echo $before_widget;
echo $before_title . $title . $after_title;
if($d) {
?>
<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> <option value=""><?php echo attribute_escape(__('Select Month')); ?></option> <?php wp_get_archives("type=monthly&format=option&show_post_count=$c&limit=$limit"); ?> </select>
<?php
} else {
?>
<ul>
<?php wp_get_archives("type=monthly&show_post_count=$c&limit=$limit"); ?>
</ul>
<?php
}
echo $after_widget;
}
wp_register_sidebar_widget('archives limit', __('Archives Limit'), 'widget_archives_limit', $widget_ops);
/**
* Display and process archives widget options form.
*
* @since 2.2.0
*/
function widget_archives_limit_control() {
$options = $newoptions = get_option('widget_archives');
if ( isset($_POST["archives-submit"]) ) {
$newoptions['count'] = isset($_POST['archives-count']);
$newoptions['dropdown'] = isset($_POST['archives-dropdown']);
$newoptions['title'] = strip_tags(stripslashes($_POST["archives-title"]));
$newoptions['limit'] = strip_tags(stripslashes($_POST["archives-limit"]));
}
if ( $options != $newoptions ) {
$options = $newoptions;
update_option('widget_archives', $options);
}
$count = $options['count'] ? 'checked="checked"' : '';
$dropdown = $options['dropdown'] ? 'checked="checked"' : '';
$title = attribute_escape($options['title']);
$limit = attribute_escape($options['limit']);
?>
<p><label for="archives-title"><?php _e('Title:'); ?> <input class="widefat" id="archives-title" name="archives-title" type="text" value="<?php echo $title; ?>" /></label></p>
<p>
<label for="archives-count"><input class="checkbox" type="checkbox" <?php echo $count; ?> id="archives-count" name="archives-count" /> <?php _e('Show post counts'); ?></label>
<br />
<label for="archives-dropdown"><input class="checkbox" type="checkbox" <?php echo $dropdown; ?> id="archives-dropdown" name="archives-dropdown" /> <?php _e('Display as a drop down'); ?></label>
</p>
<p><label for="archives-limit"><?php _e('Limit (enter a number):'); ?> <input class="widefat" id="archives-limit" name="archives-limit" type="text" value="<?php echo $limit; ?>" /></label></p>
<input type="hidden" id="archives-submit" name="archives-submit" value="1" />
<?php }
wp_register_widget_control('archives limit', __('Archives Limit'), 'widget_archives_limit_control' );
Today Matt Mullenweg from MA.TT declared today official plugin developer day because the plugin directory hit 4,000 plugins, check it out: 4,000 Plugins.
Well, it was a long run, ok, only 24 hours when Mr. Seidel’s announced that he would pull the plug on further updates to the cforms plugin.
But after consideration and many emails, he has released a update to a GPL compliant version of his plugin: 10.2.
Bernie Sanders net worth 2020.
Bernie Sanders net worth Introduction Bernie Sanders is an American politician who, since 2007, has been a junior U.S. senator from Vermont and U.S. One of the wealthiest guys to enter the potential presidential election of 2020 is Senator Bernie Sanders. Because of the intense emphasis of the political bourgeois on the role of ‘millionaires […]
Leah Messer Net Worth: How Rich is the Teem Mom Star Actually?
Leah Messer is a television personality who is best known for being a part of the cast of the hit reality television show called Teen Mom 2. As of 2019, Leah Messer net worth is estimated to be $80,000. Messer grew up as a country girl from a small town called Elkview, West Virginia. She […]
Deval Patrick net worth.
Deval Patrick net worth Deval Patrick is an American politician who was born in Chicago, Illinois, in 1956. His father was a musician and left the family when Patrick was young. His mother raised him at the Robert Taylor Homes area near Chicago’s southern side. When he was in the 8th grade, Deval was recruited […]
Jakob Campbell Net Worth: How Rich is the Rapper Actually?
Jakob Campbell is an aspiring American rapper who recently competed in Netflix’s new series Rhythm + Flow, the first televised talent competition dedicated exclusively to hip-hop and rap. Campbell managed to get in the top 16 of the competition and has created a direction for a musical career since then. As of 2022, Jakob Campbell’s […]
-
Tips & Tricks5 months ago
WordPress Security Hacks
-
Pages7 days agoWrite For Us – Guest Post
-
Showcase3 weeks ago
StylizedWeb.com
-
Tips & Tricks7 months ago
Remove the title attribute using jQuery
-
Tips & Tricks4 months ago
How to: show/hide a widget in WordPress with jQuery
-
Plugins4 months agoTop Membership plugins
-
Tips & Tricks2 weeks ago
Limit the characters that display on the_title
-
Tips & Tricks6 months ago
Remove spaces when echoing the_title
Pingback: WordPress Links week 6 - 2009 | WPStart.org - WordPress themes, plugins and news
ket
February 8, 2009 at 2:25 am
Man I like this trick and will add it to my theme. Thanks for sharing.
ket´s last blog post..
Willie P
June 17, 2011 at 5:39 pm
I agree, this is a great little trick and will be implementing it on one of my blogs pretty quick here.
Thanks!
John MacMenamin
February 17, 2009 at 9:14 am
Great Tip I’m using it (Adapted) in a theme.
Thanks again
John MacMenamin´s last blog post..Client Coupon Solution for WordPress in Two Colors!
Jimmy
February 17, 2009 at 10:11 pm
Is it possible to hide multi Div boxs with jQuery? and If so how?
frosty
February 18, 2009 at 1:00 pm
There sure is Jimmy,
All you need to do is reuse the code, and change the #id to the new div box #id.
since we already have:
jQuery(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
jQuery(‘#toggle-search’).hide();
// toggles the slickbox on clicking the noted link
jQuery(‘a#slick-slidetoggle’).click(function() {
jQuery(‘#toggle-search’).slideToggle(400);
return false;
});
});
We just need to add in:
jQuery(‘#toggle-search’).hide();
jQuery(‘#toggle-tags’).hide(); //option to hide the ID before the page loads
And:
jQuery(‘a#slick-slidetoggle’).click(function() {
jQuery(‘#toggle-search’).slideToggle(400);
return false;
jQuery(‘a#slick-slidetoggle-tag’).click(function() {
jQuery(‘#toggle-tags’).slideToggle(400);
return false;
That’s it for the function. Just make sure you create a div box with the id of
#toggle-tagsEdhuan
August 1, 2009 at 11:30 pm
You missed out the ” }); ” . Thought I might point it out to save others from some frustration. Thanks for pointing out how to add multiple boxes.
🙂
jQuery(document).ready(function() { // hides the slickbox as soon as the DOM is ready jQuery('#toggle-topic1').hide(); jQuery('#toggle-topic2').hide(); // toggles the slickbox on clicking the noted link jQuery('a#slick-slidetoggle1').click(function() { jQuery('#toggle-topic1').slideToggle(400); return false; }); jQuery('a#slick-slidetoggle2').click(function() { jQuery('#toggle-topic2').slideToggle(400); return false; }); });hamid
March 14, 2009 at 4:17 am
Thanks a lot for that,
but there something confusing me, i set it up like u said exactly and it works very fine, but it’s not working inside the categories in wordpress when im using the permalinks?
do you know why is that?
Austin Passy
March 14, 2009 at 3:34 pm
I’m not sure I understand what your talking about. Do you have an example?
Mark
March 15, 2009 at 2:29 am
Nice script – I’ll add it to my blog as well. Many thanks.
J.lE
March 23, 2009 at 7:09 am
nice plugin, will try it.
J.lE´s last blog post..KnownHost
RaiulBaztepo
March 28, 2009 at 6:00 pm
Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I’v just started to learn this language 😉
See you!
Your, Raiul Baztepo
Bill
April 23, 2009 at 4:13 am
Thanks for the info! It still amazes me everything you can do with JQuery.
Craig
September 1, 2009 at 7:45 pm
This is exactly what I was looking for, thanks!
One question though. Is it possible to hide the box permanently by maybe setting a cookie, or checking if user is logged in?
Austin
September 2, 2009 at 5:45 pm
There is, you’d have to look into the jQuery cookie tutorial for how to do this.
aron
September 7, 2009 at 1:47 am
Hi Austin
Can we use inside a loop?
Austin
September 7, 2009 at 6:12 pm
yes.
dave
September 13, 2009 at 2:57 am
many thanks for this.
is there a way to set the div to “show” on load, and “hide” on click?
thx in advance.
.-= dave´s last blog ..Closing the deal with Live Help =-.
jonesy
September 24, 2009 at 6:41 am
hey austin,
this was so nice – one question, i’m not getting this to work with multiple divs on the same click – i want to hide both divs at once, not with two buttons. do you know why this may not work:
// toggles the slickbox on clicking the noted link
jQuery(‘a#slick-slidetoggle’).click(function() {
jQuery(‘#div_a’).slideToggle(400);
jQuery(‘#div_b’).sideToggle(400);
return false;
});
});
GT
August 15, 2010 at 9:38 pm
Hey there Jonesy,
This is something I’m trying to implement as well; I want to have the more insane parts of my ranting hidden by default, and one button at the top of the post that says “Bring the Crazy”.
The key is the diff between ID and CLASS… you can have multiple things with class “craziness”, but you can only have one thing with ID craziness.
It’s still easy to do though – and no doubt in the last eight months (wrote GT, spotting the date) you’ve already found out how.
I’ll shut up now.
Cheerio
GT
Mike
October 27, 2009 at 10:43 am
Hi,
Thanks for the great tutorial, and adaptaion for multiple show/hide DIVs, it works great!!
There seems to bit a little problem with the jQuery and Firefox (3.5), whereby if the expandable DIV is at the very bottom of the page, the page flickers (quite harshly) when you hide the DIV (when it is expanded), as the page resizes to become smaller. Can’t see evidence of this problem in Opera or Safari 4.
I guess it’s a problem with Firefox’s capabilities, but is there a way around this problem?
Blake
May 17, 2010 at 10:32 am
Very cool tutorial. Will give it a shot on my site.
Pingback: Photo Catalog
Andy
June 24, 2010 at 9:20 am
Hi
Ive got the code working, but if I use it on two or three elements they all work, i.e. open and close, when one of the links is clicked.
Im wanting to create this into a shortcode in WP and would like to know how to get them to work independently without listing each separately.
How do i get them to loop and work individually?
Thanks in advance
Gimei
July 14, 2010 at 6:25 am
Thx for this. I will try out now. I have to show/hide a calendar at side of a site. Hope this will help me 🙂
Carports
August 11, 2010 at 11:13 pm
I’m glad to this is usable in the loop.
Bill
August 19, 2010 at 4:13 pm
Hi,
Great tip! Much smaller than other solutions!
But what if I want to query some posts in WordPress and don’t want to have to add a bunch of functions for every post, I just want to be able to hide and show every post. You know what I mean?
Would be great if you could help me with that!
Thanks!
Pingback: Razee » Blog Archive » How to Expand/collapse WordPress posts with jQuery
Adrian
December 18, 2010 at 2:33 pm
fixed ok thnx
F.
January 31, 2011 at 5:22 pm
Awesome. Thanks.
Nick
February 17, 2011 at 3:40 pm
Is there a way to make this code work with buttons? I can get it to work just fine with a basic link, but I’d like to create a button that toggles…
Thanks!
donya
April 8, 2011 at 10:50 am
Love this! But, what I’d like to do is show/hide the div containing the comments on each of my WordPress posts, on the index.php page, which contains multiple posts. Is there a way to modify the jQuery so that it hides each set of comments? Right now when I try to implement it, each botton (at the bottom of each post) closes just the first set of comments, rather than for the specific post.
nottingham laptop repair
June 4, 2011 at 2:28 pm
Have you ever accomplished that fully without errors?
Giorgos
June 8, 2011 at 12:28 pm
Thanks a lot! Exactly what I was looking for!!
buffalo glass block
July 12, 2011 at 3:06 am
i need this codes but does this work for all themes?
peng
August 21, 2011 at 12:38 pm
Thx a lot! I searched in Google for show/hide js script for WP and this is the only one that works perfectly in FF IE and safari…very good job Austin, thumb up!
gtjtyjtyu
September 16, 2011 at 7:34 am
yetyeteyeyerreyr
Adriana
October 31, 2011 at 12:20 pm
Hi Austin,
Thanks for posting this, it works like a charm and it’s (almost) exactly what I need.
If you don’t mind me asking, how could I make it slide from the bottom to the top?
Thanks a lot for your time!
Andy Nathan
November 4, 2011 at 9:47 pm
Will this work on any theme? or atleast any standard theme?