Get new jQuery plugins just once a week

×

Slide Panel

May 2, 2015

jay kanakiya

Slide Panel | A Collapsable Panel Jquery Plugin

Slide Panel is a jQuery plugin with minimal options and smaller footprint to create a quick Collapsable Panel horizontal and vertical.

Created by Robin Willis

Download

Example

SlidePanel

Another JQuery Panel Plugin.

Version Beta 0.0.1 Updated November 10th, 2011

Description

Slide Panel is a JQuery plugin that allows elements to expand and collapse creating a sliding panel effect. I know that this is nothing new and there are already a few JQuery panel plugins out there but this one is both highly flexible, has a small footprint and has some unique features.

Further Developments

Options

Methods

Project Page

SlidePanel

HTML

<div id="slide_panel" class="panel right">
    <div class="panel_content"></div>
    <div class="panel_tab"></div>
</div>

CSS

.left{float:left;}
.right{float: right;}

.panel{
    height:100%;
    display:block;
    overflow:hidden;
}

.panel_tab{
    height:100%;
    overflow: hidden;
}

Javascript

$("#a_panel").panel({
    handle:'#slide_panel > .panel_tab',
    content:'#slide_panel > .panel_content',
    opened:true,
    direction : "both",
    openedSize : 180,
    openEvent : 'mouseenter',
    closeEvent : 'mouseleave',
    openSelector : '#slide_panel',
    closeSelector : '#slide_panel',
});
Slide Panel

Related posts:

Timeliner
Dropdown-Dot
Wheel Menu
Slide Panel

http://jquer.in/wp-content/uploads/2015/05/Slide-Panel.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever