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: Animation 1, Animation 2 and Simple Toggle. Have fun with them and, if needed, make small modifications to find the effect that suits you.

With JavaScript disabled, the elements related to the animations are needless and could confuse the user. That's why, to separate the behaviour from the content, 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.

More Expand/Collapse demos:

  1. jQuery: Expand/Collapse
  2. jQuery: Accordion
  3. jQuery: Accordion - Nested Lists
  4. jQuery: Accordion - Heading/DIV
  5. jQuery: Accordion with corresponding href and title attributes
  6. jQuery: Expand/Collapse in different directions
  7. jQuery: Multiple Expand All/Collapse All
  8. jQuery: Nested Accordion