Menu
I am trying to slide jquery .slideToggle but i am not able to add direction left to right or right to left on click of a div (nav). Please help me out, below is my code.
<!DOCTYPE html>
<html>
<head>
<style>
p { width:400px; float:right;background:#e4e4e4; margin:5px;padding:5px;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body style="font-size:10px; color:#333;">
<div style="width:50px; height:15px;float:right;background:#ccc;border:1px solid #333;text-align:center;">Nav</div>
<p>
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</p>
<script>
$("div").click(function () {
$("p").slideToggle("slow");
});
</script>
</body>
I am new to jquery, help much appreciated.
856
The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods. If the elements have been slid down, slideToggle() will slide them up. If the elements have been slid up, slideToggle() will slide them down. $(selector).
The . slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
The task here is to create a slide left and right toggle effect in the JQuery, you can use the jQuery animate() method. . animate() method: It is used to change the CSS property to create the animated effect for the selected element.
You need to add a parent to the text.
<body>
<div class="nav">Nav</div>
<div class="text">
<p>This is the paragraph to end all paragraphs. You should feel <em>lucky</em> to have seen such a paragraph in your life. Congratulations!</p>
</div>
</body>
Style:
body {
font-size: 10px;
color: #333; }
.nav {
float: right;
width: 50px;
height: 30px;
text-align: center;
background: #ccc;
border: 1px solid #333; }
.text {
overflow: hidden;
float: right;
margin: 5px;
padding: 5px;
width: 400px;
background: #e4e4e4; }
And the javascript:
$('.nav').click(function() {
$('.text p').css({
'width': $('.text p').width(),
'height': $('.text p').height()
});
$('.text').animate({'width': 'toggle'});
});
You have a demo at: http://jsfiddle.net/abwVd/
51
The default behaviour of slideToggle in jquery is to "slide up" or "slide down". If you want your <p> to "slide left" and "slide right", you could use the 'slide' effect available in jquery ui. The direction argument accepts 'up','down','left','right' as valid values. http://docs.jquery.com/UI/Effects/Slide
36
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
