Sliding Panel From Side On Click Using JQuery

There are many ways to slid a DIV or panel from side of your web page on click but this one is different that you can show or hide many div on many buttons using JavaScript and jquery and can add unlimited DIV and functions on it with slow motion sliding effect.

So its time to add Sliding Panel From Side On Click on your desired page or blog where you can but your desires data to show on click by user on demand. Now there is a DEMO of Sliding Panel From Side On Click on the below link so check that out then garb the Sliding Panel From Side On Click code from below.

Features:

1.) JQuery File Added.
2.) JavaScript Added.
3.) CSS Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

JQuery:

<script src="https://code.jquery.com/jquery-2.0.0b1.js"></script>

JavaScript:

<script>
$(function () {

// get the width of the first content box
// add a bit of extra so we end up with "-350px"
var contentWidth = '-' + ($('.content').width() + 50) + 'px';

// reposition the content here in case javascript is disabled
$('.content').css({
position: 'absolute',
left: contentWidth
});

$("li a").click(function () {
event.preventDefault();
var $blockID = $( $(this).attr('href') );
// if the content is already showing, don't do anything
if ($blockID.hasClass('visible')) { return; }
// hide any visible content
$('.content.visible')
.removeClass('visible')
// move the old content past the current window width, then reset it's position
.animate({
left: '-' + $(window).width()
}, function () {
// Remove left setting after the animation completes
$(this).css('left', contentWidth);
});
$blockID
.addClass('visible')
.animate({ left: 0 });
});
});
</script>

CSS:

<style>
.wrapper {
position: relative;
}
.content {
width: 300px;
height: 300px;
padding: 0;
left: 0;
top: 0;
}
.box {
width: 300px;
height: 300px;
opacity: 0.5;
}
#one .box {
background: red;
}
#two .box {
background: blue;
}
#three .box {
background: green;
}
ul li {
display: inline;
padding-right: 10px;
list-style: none;
}
</style>

HTML:

<ul>
<li><a href="#one">One</a>
</li>
<li><a href="#two">Two</a>
</li>
<li><a href="#three">Three</a>
</li>
</ul>
<div class="wrapper">
<div id="one" class="content">
<div class="box"></div>
</div>
<div id="two" class="content">
<div class="box"></div>
</div>
<div id="three" class="content">
<div class="box"></div>
</div>
</div>

Customization:

1.) You Can Add More HTML-CSS. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…