Hide and Slide Drupal content with jQuery

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.

Comments

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

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

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

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.

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?

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.

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

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

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.

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.

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.

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

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

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

its nice and very helpful for me thanks

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?

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

Where would one find the page page load function in drpal7

Is it possible to hide more than one div below the toggle div? ( I want to hide 3 divs below the toggle text, how can I do this?)

Hey,

are there any modules i need to activate in Drupal that this work?
I am using Drupal 7 and just copied your example, but it wont work :(

Greetz

Sebastian

Try to replace each "$" with "jQuery".

Perfect, thx alot ! :D

Hi, many thanks for this - it works a treat. If I want to have a 'Read less' button available so that the content slides up again, how would I do this? I added $(this).slideToggle("slow");
to hide the toggler when clicking 'Read more'. Now just need the 'Read less' part.

One way would be to structure your markup as [button] [button] [content], i.e.

<p class="more">more</p>
<p class="less">less</p>
<div>content</div>

then use

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

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

or you could nest the button and content and use the parent() selector.

Thanks but now it isn't working at all. Here is my code. [js as sbove]
<p>Osteopathy is a primary health care system, etc etc...</p>
<p class="more"><strong>Read more...</strong></p>
<div class="content">
<p>A core principle behind osteopathy is the idea ..... more content.</p>
<p class="less">Read less...</p>
</div>

All the text is now displaying without the option of expanding the content div. I have flushed all my caches and refreshed the page etc. Am I missing something here?

You need to think about content order, as e.g. the next() function depends on it.
I.e.
$(".more").click(function(){
$(this).slideToggle("slow").next().slideToggle("slow");
return false;
}).next().hide();

$(".less").click(function(){
$(this).parent().slideToggle("slow").prev().slideToggle("slow");
return false;
});

Hello. I am having the same problem as kristin.e. I used your javascript from 1/30/2013 and structured similar to kristin.e, but can you explain a little more what you mean about how the content needs to be ordered? I am not super familiar with javascript, so I really appreciate your help!

My HTML (without the spaces, sorry I don't know how to have the code show up otherwise):
< p class="moreToggle">Show details...< /p>
< div>
Hey, this is secret! Please click again to help me hide...
< p class="lessToggle">Hide details< /p>
< /div>
< /p>

My JS (Drupal 7):
jQuery(".moreToggle").click(function(){
jQuery(this).slideToggle("slow").next().slideToggle("slow");
return false;
}).next().hide();

jQuery(".lessToggle").click(function(){
jQuery(this).parent().slideToggle("slow").prev().slideToggle("slow");
return false;
});

Thanks!
Lauren

Please disregard my previous comment. I actually just figured out I was missing the first line needed for the js: jQuery(document).ready(function(){

Thanks!

working great thanks !!

triq.net blog © 1999-2016 Christian Zuckschwerdt — powered by seven of drupal — run on lamp