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.