How to slide toggle a DIV from Left to Right?

admin January 4, 2021October 12, 2021 0 Comments css transition slide right to left, jquery slide left right animation, jquery slide panel right to left, jquery toggle left to right animation, onclick slide div left to right, showhide div left to right jquery, toggle left to right

In this tutorial, we are going to see how to slide toggle a DIV from Left to Right? There is no such method as slideLeft() and slideRight() which looks like slideUp() and slideDown(), but you can simulate these effects using jQuery’s animate() function.

How to slide toggle a DIV from Left to Right?

<!DOCTYPE html>
<html>
	<head>
		<title>Slide toggle a DIV from Left to Right</title>
		<style type="text/css">
			.text{
				width: 500px;
				margin-top: 10px;
        float:left;
        overflow: hidden;
			}
		</style>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var DivWidth = $(".text").width();
				$(".left").click(function(){
					$(".text").animate({
						width: 0
					});
				});
				$(".right").click(function(){
					$(".text").animate({
						width: DivWidth
					});
				});
			});
		</script>
	</head>
	<body>
        <button type="button" class="left">Scroll left</button>
		<button type="button" class="right">Scroll right</button>
		<div class="text">
			Integer pellentesque arcu at neque egestas gravida. Sed elementum nunc vel pharetra dignissim. Donec ac sem et massa commodo mattis tristique non urna. Integer mauris nunc, vehicula vitae ipsum ultrices, pulvinar dapibus turpis. Phasellus aliquam elementum massa sit amet pretium. Fusce facilisis lacus vitae eros finibus convallis. Vestibulum ac turpis a massa bibendum ullamcorper vitae id ex. Morbi at consequat sem. Sed convallis dictum congue. 
		</div>
	</body>
</html>

Result
Integer pellentesque arcu at neque egestas gravida. Sed elementum nunc vel pharetra dignissim. Donec ac sem et massa commodo mattis tristique non urna. Integer mauris nunc, vehicula vitae ipsum ultrices, pulvinar dapibus turpis. Phasellus aliquam elementum massa sit amet pretium. Fusce facilisis lacus vitae eros finibus convallis. Vestibulum ac turpis a massa bibendum ullamcorper vitae id ex. Morbi at consequat sem. Sed convallis dictum congue.

Result

Integer pellentesque arcu at neque egestas gravida. Sed elementum nunc vel pharetra dignissim. Donec ac sem et massa commodo mattis tristique non urna. Integer mauris nunc, vehicula vitae ipsum ultrices, pulvinar dapibus turpis. Phasellus aliquam elementum massa sit amet pretium. Fusce facilisis lacus vitae eros finibus convallis. Vestibulum ac turpis a massa bibendum ullamcorper vitae id ex. Morbi at consequat sem. Sed convallis dictum congue.

The following example will scroll the div block from right to left and left to right

<!DOCTYPE html>
<html>
	<head>
		<title>Slide toggle a DIV from Left to Right</title>
		<style type="text/css">
			.text{
				width: 500px;
				margin-top: 10px;
				float:left;
				overflow: hidden;
			}
		</style>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(".left-right").click(function(){
					$(".text").animate({
						width: "toggle"
					});
				});
			});
		</script>
	</head>
	<body>
		<button type="button" class="left-right">Left / Right</button>
		<div class="text">
			Integer pellentesque arcu at neque egestas gravida. Sed elementum nunc vel pharetra dignissim. Donec ac sem et massa commodo mattis tristique non urna. Integer mauris nunc, vehicula vitae ipsum ultrices, pulvinar dapibus turpis. Phasellus aliquam elementum massa sit amet pretium. Fusce facilisis lacus vitae eros finibus convallis. Vestibulum ac turpis a massa bibendum ullamcorper vitae id ex. Morbi at consequat sem. Sed convallis dictum congue. 
		</div>
	</body>
</html>

Result
Integer pellentesque arcu at neque egestas gravida. Sed elementum nunc vel pharetra dignissim. Donec ac sem et massa commodo mattis tristique non urna. Integer mauris nunc, vehicula vitae ipsum ultrices, pulvinar dapibus turpis. Phasellus aliquam elementum massa sit amet pretium. Fusce facilisis lacus vitae eros finibus convallis. Vestibulum ac turpis a massa bibendum ullamcorper vitae id ex. Morbi at consequat sem. Sed convallis dictum congue.

Result

How to slide toggle a DIV from Left to Right?

You May Also Like

How to refresh a page with jQuery

How to disable all <input> inside a form with jQuery?

How to get the current URL using Jquery

Leave a Reply Cancel reply