Getting Started The Easy Way

jQuery for the Win!

Step 1: Add scotchPanels.js

After jQuery, add the scotchPanels.js file.

<script src="http://example.com/js/scotchPanels.js">

Step 2: Pick the Container

Decide on the container that you want your Panel to come out of. Try to pick a container that doesn't have any padding in the direction of where the Panel will be coming out of.

Step 3: Add Your Panel's Markup inside of that Container

You'll want to add this markup inside of that container. If you are building a side navigation, put this directly below the opening body tag. If you want your panel inside of a custom div or wrapper, put it inside of that div.

<div id="panel-example"> <h2>Whatever you want in your panel</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, blanditiis.</p> </div>

Step 3: Add a button to toggle the Panel

This demo is showing how to create a click event, but you can tie opening and closing toggles to whatever events you want.

<a href="#" class="toggle-panel">Toggle Panel</a>

Step 4: Initialize and Configure

In either a JavaScript file or inline, initalize the Panel. This has to be below the scotchPanels.js file. Some of the following settings below are defaults, and are only added for demonstration purposes.