CODEWITHSUNDEEP
jquerytoggleright-to-left
benjo
benjo

Reputation: 351

slideToggle JQuery right to left

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>

Upvotes: 29

Views: 198950

Answers (11)

Ken Lee
Ken Lee

Reputation: 8043

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>

Upvotes: 0

TorvaldsDB
TorvaldsDB

Reputation: 972

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)

Upvotes: 3

A.J
A.J

Reputation: 67

You can try this:

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

Upvotes: 1

AlexanderPop
AlexanderPop

Reputation: 141

$("#mydiv").toggle(500,"swing");

more https://api.jquery.com/toggle/

Upvotes: 4

piyush singh
piyush singh

Reputation: 21

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.

Upvotes: 2

Souvik
Souvik

Reputation: 823

Try this

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

Upvotes: 4

Anbu
Anbu

Reputation: 520

include Jquery and Jquery UI plugins and try this

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

Upvotes: 2

w3debugger
w3debugger

Reputation: 2102

Please try this code

$(this).animate({'width': 'toggle'});

Upvotes: 6

Spyros
Spyros

Reputation: 313

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

Upvotes: 5

painotpi
painotpi

Reputation: 6996

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

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

Test Link

Upvotes: 29

Aldi Unanto
Aldi Unanto

Reputation: 3682

Try this:

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

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

Upvotes: 19

Related Questions