aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Slide DIV Content from Left to Right or Move DIV from Right to Left in jQuery

Dec 12, 2013

Here I will explain how to move or slide div content from left to right in
jQuery or move div content right to left in jQuery.
In previous articles I explained jQuery slideup slidedown slidetoggle example, jQuery fadein or fadeout example,
jQuery create rounded corners for textbox, jQuery show time in webpage and many articles relating to JQuery. Now I will explain how to move div from left to right or right to left in jQuery.

To implement this we need to write the code like as shown below

<title>jQuery Move DIV FROM Left to Right & Right to Left</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

<script type="text/javascript">
$(function() {
$("#btnright").click(function() {
$('#slidediv').toggle('slide', { direction: 'right' }, 700);
$("#btnleft").click(function() {
$('#slidediv').toggle('slide', { direction: 'left' }, 700);
<style type="text/css">
body {
font: 12px Tahoma, Arial, Helvetica, Sans-Serif;
#slidediv {
border:2px solid #00A4EF;
#slidediv p {
margin: 15px;
font-size: 0.917em;
#contentdiv {
clear: both;
margin: 0 auto;
max-width: 534px;
<div id="contentdiv">

<h2>Slide DIV from right to left or left to right.</h2>
<input type="button" id="btnleft" value="Left to Right" />
<input type="button" id="btnright" value="Right to Left" />
<div id="slidediv">
<p>Welcome to Welcome to Welcome to Welcome to Welcome to Welcome to Welcome to Welcome to Welcome to Welcome to Welcome to Welcome to Welcome to Welcome to Welcome to Welcome to Welcome to Welcome to Welcome to </p>


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Irtekaz Ahmed Khan said...

fantastic, thanks sir

Anonymous said...


srikanth aaduri said...
This comment has been removed by the author.
Anonymous said...


lshcollection said...

hi, if user click outside div, how to make it return back

Anonymous said...

Thanks a lot!

Chandra Prakash Gupta said...

Wow nice!!

Mansour said...

You saved my life, Thanks!

Dhilip Kumar said...

In Html Version Everything is working fine, but I have implemented in wordpress but it's working

Yerkebulan Mendibayev said...

Thank you! I put iframe in div. Is it posible when after 2nd onclick(show >hide>show) save changes in div ? For example : i open other web page by div , make changes , hide div and show web page with changes

Yerkebulan Mendibayev said...
This comment has been removed by the author.
Yerkebulan Mendibayev said...

if it is not dificult write please code

Give your Valuable Comments

Other Related Posts

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.