Sliding div left/right rather than up/down

Question

Is there an easy way to make this into a sliding div that goes from left to right basing what code snippet I have provided below that is up/down?

So rather having it go up/down, make it go left/right?

$(document).ready(function() {

    $("#open").click(function(){
        $("div#panel").slideDown("slow");

    }); 

    $("#close").click(function(){
        $("div#panel").slideUp("slow"); 
    });     

    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });

});

score 2 · Answer 1 · answered Aug 11 '13 at 12:01

2

You can use the animation on hide to slide it from left/right.

$(document).ready(function() {

    $("#open").click(function(){
        $("div#panel").show('slide', {direction: 'right'}, "slow");
    }); 

    $("#close").click(function(){
        $("div#panel").hide('slide', {direction: 'left'}, "slow");
    });     

    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });

});

answered Aug 11 '13 at 12:01

Ashis Kumar

6,494
2
21
36

2

Thank you, I'll give this a shot! Would that work with jquery-1.3.2.js? – Hybrid82 Aug 11 '13 at 12:21

score 1 · Answer 2 · answered Aug 11 '13 at 12:02

1

You can use jQueryUI and the slide effect.

Example:

$("div#panel").hide("slide", {direction: "left" }, 1000);
$("div#panel").show("slide", { direction: "right" }, 1000);

answered Aug 11 '13 at 12:02

geekchic

2,371
4
29
41

If the above answer does not work, I'll give this a try. Would I need the jqueryUI to be able to implement this code? – Hybrid82 Aug 11 '13 at 12:22
You would need to include jqueryUI. – geekchic Aug 11 '13 at 12:24
Alrighty, I at the moment do not need jqueryUI for my project, but I'm sure I would down the road - when that times comes, I'll use what you posted as a reference so Thank you for helping out ;) – Hybrid82 Aug 11 '13 at 12:29

Fouad Fodail · Accepted Answer · 2013-08-11T13:34:32.803

1

You can use jQuery animate http://api.jquery.com/animate/

$(document).ready(function() {

    var  myDivWidth = $( "div#panel" ).width();

    $("#open").click(function(){
        $( "div#panel" ).css({'width' : '0' }).animate({width: myDivWidth}, 'slow');
    }); 

    $("#close").click(function(){
        $( "div#panel" ).animate({width: 0}, 'slow'); 
    });      

});

Update :

Here is the jsfiddle http://jsfiddle.net/ck4PX/
Updated jsfiddle http://jsfiddle.net/QGXQm/

edited Aug 11 '13 at 13:34

answered Aug 11 '13 at 12:24

Fouad Fodail

2,653
1
16
16

Could you provide a jsfiddle? – Hybrid82 Aug 11 '13 at 12:37
Your fiddle doesn't work...EDIT: okay, nvm, it works - however, I'm not looking for any animation to be called until I click the toggle fucntion or an open/close – Hybrid82 Aug 11 '13 at 13:08

Sliding div left/right rather than up/down

3 Answers3