jQuery experiments: Toggle the visibility of the sidebar

the script

Main content

Recently, someone asked me how he could toggle the visibility of the right column of his fluid layout with negative margins.

This can be achieved in various ways. Here, I propose three simple pre-defined showing/hiding effects: Queued Slide Effects, Concurrent Slide Effects and Simple Toggle Effect. Have fun with them and, if needed, make small modifications to find the effect that suits you. The plugin allows you to add your own custom effects to the pre-defined set of animation functions.

The plugin can be easily customized. The default option values can be overridden by passing the desired options to the toggleSidebar method. See the DEMO.

The plugin allows you to define your own custom animation functions. See the DEMO.

With JavaScript disabled, the elements related to the animations are needless and could confuse the user. That's why they are generated by the jQuery script.

Right Column

This is the sliding panel.

It is positioned relatively to its container.


The script animates:

  • the 'right' CSS property of this panel;
  • the right margin of the main column;
  • the opacity of this panel;
  • the opacity of the animation trigger.

If you find a bug or have a suggestion/request, please send me an e-mail. I apologize if sometimes, because of limited time, I can't respond to all requests or my responses are delayed.

If some of my scripts have been useful to you and you would like to thank me, feel free to donate any amount you wish. Thanks :)