Hide and Slide Drupal content with jQuery

Submitted by zany on Sat, 08/23/2008 - 23:34

The Drupal core and many modules use the jQuery package to create nice interactive effects. But it's also a handy and easy to use tool for designers and authors!

Here is a quick example to show/hide a div with a nice slide effect, triggered from an adjoining element. If you know your CSS you can do all sort of tricks with this.

<p class="toggler">Be snoopy...</p>
<div>
Hey, this is secret! Please click again to help me hide...
</div>

The paragraph "p" is the trigger, this is marked with a class of "toggler". The immediately following div is hidden on page load and display when you click the "toggler". Here is the jQuery code:

$(".toggler").click(function(){
  $(this).next().slideToggle("slow");
  return false;
}).next().hide();

I.e. each "toggler" gets a click function and the next element is hidden. The function itself slides that next element up and down on click.

Stick this in the page load function and you are ready to go!

Quick example: Create a new node, switch the Input Format to Full HTML and put this in the body section:

<script type="text/javascript">
$(document).ready(function(){
  $(".toggler").click(function(){
    $(this).next().slideToggle("slow");
    return false;
  }).next().hide();
});
</script>
 
<p class="toggler">Be snoopy...</p>
<div>
Hey, this is secret! Please click again to help me hide...
</div>

Please note that you need jQuery enabled. This will likely be the case but it could be disabled in some themes.

Tags:

snippet

Drupal

Add new comment

Comments

Submitted by Gast on Sun, 12/20/2009 - 14:31

Could you please make it more specific, I don't quiet understand what the steps should be:)

Submitted by zany on Sun, 12/20/2009 - 15:29

Added a quick example to get you started. See the last paragraph.

Submitted by mike on Mon, 10/18/2010 - 13:54

Thanks!
This really saved me a lot of time!
Is there a way to use the default sliders that garland template has?

Submitted by zany on Mon, 10/18/2010 - 14:26

Mike, if you want to copy a specific style, like Garland: have a look at the page source and identify the CSS. It's most likely best-practice Drupal code anyway.

Submitted by Andrew on Thu, 10/28/2010 - 13:21

Hello,
Firstly thanks for this, it's working brilliantly and was really easy.

But, if the object being hidden is wider than the box it's in, then that jumps quickly to expand horizontally, before sliding verticality down slowly.

Oh and a question, how can I change the hide button button? What I mean is, I would like different links opening and shutting it, is this possible with this simple code or will I need to start assigning ids/classes to actions?

Submitted by zany on Sun, 10/31/2010 - 15:30

Andrew, you'll always need to tweek the CSS a little. Different buttons is no problem. Use IDs or if you have something like "button" "button" "box" you can try next().next() on the first button and just next() on the second.

Submitted by Shawn Peters on Tue, 03/15/2011 - 17:08

Any chance you know how to do this same thing on Drupal 7? Great post, btw!

Submitted by zany on Tue, 03/15/2011 - 17:54

Did you try the example? It's very basic jQuery and should still work.

Submitted by Jeremy on Tue, 04/05/2011 - 17:59

Encountering a problem with this... If the text in the div extends to a second line, the contents won't stay shown. If you click the toggle link, the div bounces down and then back up immediately. Anyone else have this problem? Know a solution?

Thanks, Really trying to figure this out.

Submitted by zany on Tue, 04/05/2011 - 18:15

I don't think the problem is with the DIV content. Try to use slideDown() and see if that helps. That would indicate a problem where the slideToggle is activated twice per click.

Submitted by Jeremy on Tue, 04/05/2011 - 18:17

Hm, actually all I had to do was move the script so that it was sitting directly above the list of things to show/hide. Previously I had the script, then an intro paragraph, then the list.

Submitted by Feizing on Tue, 10/04/2011 - 21:50

Add .unbind('click') just before .click() function. You can keep the script tags where you had them before ;)

Submitted by Anonymous on Thu, 04/07/2011 - 17:52

When the content shows, how would you hide the toggler class.
Say you want a "read more" link. But when the link is clicked you want the link itself to either dissapear or say "read less"... thanks

Submitted by zany on Tue, 04/12/2011 - 15:55

To hide the toggler class just add:
$(this).slideToggle("slow");

Submitted by sarvesh on Wed, 06/29/2011 - 14:26

its nice and very helpful for me thanks

Submitted by Sam Abbitt on Fri, 11/04/2011 - 21:12

This script is great, but how can I make it underline the text when the cursor hovers over it? I would also like for the arrow style to stay an arrow, and not turn into a text selector shape. Can anyone help?

Submitted by zany on Fri, 11/04/2011 - 21:31

Use CSS. Try .toggler:hover { text-decoration: underline; cursor: default; }