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>
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:
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:
Please note that you need jQuery enabled. This will likely be the case but it could be disabled in some themes.