29

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>
0

11 Answers 11

Reset to default
29

You can do this using additional effects as a part of jQuery-ui

$('.show_hide').click(function () {
    $(".slidingDiv").toggle("slide");
});

Test Link

2
19

Try this:

$(this).hide("slide", { direction: "left" }, 1000);

$(this).show("slide", { direction: "left" }, 1000);

2
6

Please try this code

$(this).animate({'width': 'toggle'});
3
  • 4
    This code does nothing unless you use jQuery UI. All default options you got is 'slow' and 'fast'
    – Ryan Coolwebs
    Commented Feb 17, 2016 at 6:18
  • 2
    Futhermore, this code will throw a syntax error as animate parameters should be passed as an object (you're missing the {}).
    – vard
    Commented Feb 17, 2016 at 11:31
  • 1
    This would be a better answer if it included an explanation along with the code.
    – John Hascall
    Commented Feb 18, 2016 at 1:25
5

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

4

Try this

$('.slidingDiv').toggle("slide", {direction: "right" }, 1000);
4 
$("#mydiv").toggle(500,"swing");

more https://api.jquery.com/toggle/
2
  • 5
    please add more description
    – Alex Filatov
    Commented Jan 16, 2018 at 16:47
  • 1
    Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you’ve made. ref
    – Alper t. Turker
    Commented Jan 16, 2018 at 17:26
3

I struggled with toggle('slide') and slideToggle hours.

conclusions I get:

  • toggle('slide') can only hide the element from right to left, which means showing it from left to right
  • slideToggle can only hide the element from bottom to top which means showing it from top to bottom

If you want to define the direction of contraction freely, you have to use the slide effect coming from jQuery UI https://api.jqueryui.com/slide-effect/?rdfrom=http://docs.jquery.com/mw/index.php?title=UI/Effects/Slide&redirect=no

For example:

$element.toggle('slide', { direction: 'left/right/up/down' }, 1000)
2

include Jquery and Jquery UI plugins and try this

 $("#LeftSidePane").toggle('slide','left',400);
2

I would suggest you use the below css

.showhideoverlay { 
  width: 100%;
  height: 100%;
  right: 0px;
  top: 0px;
  position: fixed;
  background: #000;
  opacity: 0.75;
}

You can then use a simple toggle function:

$('a.open').click(function() {
  $('div.showhideoverlay').toggle("slow");
});

This will display the overlay menu from right to left. Alternatively, you can use the positioning for changing the effect from top or bottom, i.e. use bottom: 0; instead of top: 0; - you will see menu sliding from right-bottom corner.

1

You can try this:

$('.show_hide').click(function () {
    $(".slidingDiv").toggle("'slide', {direction: 'right' }, 1000");
});
0

You may use jQuery UI to do the job.

(I write this additional answer in order to show the effects of both slide-in from left toggle and slide-in from right toggle with the contents properly positioned and I believe it can help someone who is in need of such a common and normal requirement)

The trick is to set the direction ("left" or "right") and use the "slide" effect.

function slideleft(){
    var effect = 'slide';
    var options = { direction: "left" };
    var duration = 300;
    $('#myDiv1').toggle(effect, options, duration);
}

function slideRight(){
    var effect = 'slide';
    var options = { direction: "right" };
    var duration = 300;
    $('#myDiv2').toggle(effect, options, duration);
}

So a fully working script (with contents box properly positioned for the two slide-toggle effects) is as follows:

or see this DEMO

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script
  src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"
  integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c="
  crossorigin="anonymous"></script>
<style>

#button1 {
    position:absolute;
    left:0px;
    top:50px;
}


#button2 {
    position:absolute;
    right:0px;
    top:50px;
}


#myDiv1 {
    position:absolute;
    left:0px;
    top:150px;
    width:300px;
    padding:10px;
    background-color:#FFFFFF;
    border:1px solid #333;
    display:none;
}

#myDiv2 {
    position:absolute;
    right:0px;
    top:150px;
    width:300px;
    padding:10px;
    background-color:#FFFFFF;
    border:1px solid #333;
    display:none;
}



</style>

    
<h2>Slide toggle (Left to Right) and (Right to Left)</h2>

    <p>

        <button id="button1" onclick="javascript:slideleft();">Slide Toggle (from left)</button>
        <button id="button2" onclick="javascript:slideRight();">Slide Toggle (from right)</button>

    </p>
    <div id="myDiv1">
        <p>LEFT BOX - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>

    <div id="myDiv2">
        <p>RIGHT BOX - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>



<script>

function slideleft(){
    var effect = 'slide';
    var options = { direction: "left" };
    var duration = 300;
    $('#myDiv1').toggle(effect, options, duration);
}

function slideRight(){
    var effect = 'slide';
    var options = { direction: "right" };
    var duration = 300;
    $('#myDiv2').toggle(effect, options, duration);
}

</script>

Not the answer you're looking for? Browse other questions tagged or ask your own question.