Menu
i'm new in JQ i have this script i found on the internet and its do exactly what i need but i want the sliding will be from the right to the left how can i do it? please help
this is the code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
<style>
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
</style>
</head>
<body>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>
<a href="#" class="show_hide">Show/hide</a>
282
You can do this using additional effects as a part of jQuery-ui
$('.show_hide').click(function () {
$(".slidingDiv").toggle("slide");
});
Test Link
195
Try this:
$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);
29
I know it's been a year since this was asked, but just for people that are going to visit this page I am posting my solution.
By using what @Aldi Unanto suggested here is a more complete answer:
jQuery('.show_hide').click(function(e) {
e.preventDefault();
if (jQuery('.slidingDiv').is(":visible") ) {
jQuery('.slidingDiv').stop(true,true).hide("slide", { direction: "left" }, 200);
} else {
jQuery('.slidingDiv').stop(true,true).show("slide", { direction: "left" }, 200);
}
});
First I prevent the link from doing anything on click. Then I add a check if the element is visible or not. When visible I hide it. When hidden I show it. You can change direction to left or right and duration from 200 ms to anything you like.
Edit: I have also added
.stop(true,true)
in order to clearQueue and jumpToEnd. Read about jQuery stop here
5
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
