What is it?

A mechanism for hiding and showing content with a nice, sliding animation. Pretty common around teh Interwebs although I've never really found a proper name for them. Unless informed otherwise, I hereby name them "Slidey Panels".


Basic example with default options

Click me!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


The .inner & .hd divs are only for styling purposes and can be omitted. (see note in CSS section below).



Style as you see fit but make sure that you don't apply any border, padding or margin to the content container. If you need to, add it to an inner div, as per the example.

If you don't intend to use any border, margin or padding style you can omit the .inner div altogether.


See the demo for an example markup pattern.

new Shodan.UI.SlideyPanel(element (String)[, options (Object)]);
  • element (DOM Element | String): A DOM element or ID
  • options (Object): Various configuration options


  • autoHide (Bool): set to true if content should be hidden initially. Default: true;
  • callback (Function): Callback function to be executed after show / hide animation. Default: null.
  • contentSelector (String): CSS selector for the content to be toggled. Should be unique. Default: ".content".
  • duration (Int): Animation duration in seconds. Default: 0.5
  • openClass (String): CSS class to be applied to container when content is showing. Default: "open".
  • toggleSelector (String): CSS selector for the toggle. Default: ".hd".
  • transition (String): Scripty2 animation transition preset. Scripty2 transitions


  • An example demonstrating additional options.