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.

1
2
3
4
<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:

1
2
3
4
$(".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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<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.

MP3 Scan + Repair

The audio repair tool to check and fix all your MP3 files.

Check and repair your MP3 audio files.

Some of your audio players might be picky or play choppy sound. Scan and fix all your MP3 files for best performance! And it's free, too!

MP3 Scan + Repair

Mouse Acceleration for OS X

Set up extended speed parameters for your mouse.

Extended mouse settings

The Mouse Acceleration PrefPane is a GUI and startup item to Richard Bentley's MouseFix.

You can set up extended speed parameters and acceleration curves for your mouse.

  • Increase mouse pointer precision
  • Speed up your mouse movement
  • Set mouse acceleration parameters
  • Full control with just two simple knobs

Mouse Acceleration for OS X

About the Author

Hi there! I'm Christian Zuckschwerdt a freelance software designer from Germany. On this blog I'd like to share some free and open source software for GNU/Linux and Apple Mac OS X.
There are also some themes and tricks for the Drupal CMS. And then the occasional hardware or gadget hack. It's all free and mostly licensed under the GPL or CC.
Write a comment or send me a mail. I love to hear from you!

About FOSS

Do you know how much free and open source software is involved in creating and delivering some basic web pages?

This triq.net blog is rendered by hexo themed with nunjucks compiled by nodejs served by apache httpd secured with openssl stored on MariaDB running on gentoo linux, edited with vim deployed by openssh, graphics done with inkscape and gimp.

triq

zany@triq.net
triq.net blog
© 1999 – 2020 Christian Zuckschwerdt.
Datenschutz / GDPR

Links