jQuery Slide Panel Plugin

jQuery Slide Panel Plugin

The jQuery slidePanel Plugin lets you easily open slide panels from the left or right which contain either the default content or content loaded using Ajax. Other options include position, opacity, speed, and click outside to close. Inspired by a post on spyrestudios.

Demo Download


Usage for one panel is simple. Just use the panel id as the jQuery selector for the plugin.

                // default settings

If you have multiple panels on your page you can assign a trigger id to each panel.

                // custom settings with position options
                    triggerName: '#trigger2',
                    position: 'fixed',
                    triggerTopPos: '20px',
                    panelTopPos: '10px'
                // custom settings with ajax data source
                    triggerName: '#trigger3',
                    ajax: true,
                    ajaxSource: 'ajax.html'
                // example using all custom settings
                    triggerName: '#trigger4',
                    position: 'fixed',
                    triggerTopPos: '20px',
                    panelTopPos: '10px',
                    panelOpacity: 0.8,
                    speed: 'fast',
                    ajax: false,
                    ajaxSource: null,
                    clickOutsideToClose: true


Here are all of slidePanel's options and their default values:

                // these can all be overridden in your code
                triggerName:		'#trigger',	// default trigger id if not supplied
                position:			'absolute',	// can be 'absolute' or 'fixed'
                triggerTopPos:		'80px',		// position of trigger from the top
                panelTopPos:		'50px',		// position of panel from the top
                panelOpacity:		0.9,		// opacity setting 0 to 1
                speed:				'fast',		// toggle speed, 'fast' or 'slow'
                ajax:				false,		// use ajax as the data source, default shows content in html markup
                ajaxSource: 		null,		// URL of the ajax data source, must be defined if ajax is 'true'
                clickOutsideToClose: true		// whether the panel(s) should close when clicked outside the panel

Demo Download

If you find this resource useful, or if you use this code/plugin on your website, consider tossing a buck, or two, my way to help cover costs!

Best WordPress Resources
Unlock any device (Apple TV, Smart TV, iPad, iPhone, etc.) to watch region-blocked content such as Netflix! Free 7-day trial!