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

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

                // default settings
                $('#panel').slidePanel();
            

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

                // custom settings with position options
                $('#panel2').slidePanel({
                    triggerName: '#trigger2',
                    position: 'fixed',
                    triggerTopPos: '20px',
                    panelTopPos: '10px'
                });
            
                // custom settings with ajax data source
                $('#panel3').slidePanel({
                    triggerName: '#trigger3',
                    ajax: true,
                    ajaxSource: 'ajax.html'
                });
                
                // example using all custom settings
                $('#panel4').slidePanel({
                    triggerName: '#trigger4',
                    position: 'fixed',
                    triggerTopPos: '20px',
                    panelTopPos: '10px',
                    panelOpacity: 0.8,
                    speed: 'fast',
                    ajax: false,
                    ajaxSource: null,
                    clickOutsideToClose: true
                });
            

Options

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!