How to Slide an Element Horizontally

Question

I need to add a else statement to a click function so the .container disappears when the button is clicked a second time.

function() {

    $('div.container').css({'width':'350px'});

    } else {

    $('div.container').css({'width':'0'});

     }

});

Edit:

I need the element to toggle slide left on a button click.

use toggleClass() with css to do that.What happen if more than two times same button clicked? — Alive to die - Anant, Oct 07 '17 at 06:50

Ahmad Maleki · Accepted Answer · 2017-10-07T09:59:38.313

2

toggle() Method:

Using jQuery you can use the toggle() method.

The toggle() method toggles between hide() and show() for the selected elements.

So you can simply have

$('#buttonId').on('click', function(){
    $('#container').toggle();
})

div{
  background-color: #a8a8ff;
  height: 100px;
  width: 350px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buttonId">Click Me!</button>
<div id="container" class="long"></div>

toggleClass() Method:

According to your comment if you want to toggle a style (e.g: width) it's better and cleaner to define a class for your style and use toggleClass() method.

The toggleClass() method toggles between adding and removing the class.

$('#buttonId').on('click', function(){
    $('#container').toggleClass('long short');
})

div{
  background-color: #a8a8ff;
  height: 100px;
}

.long{
  width: 350px;
}

.short{
  width: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buttonId">Click Me!</button>
<div id="container" class="long"></short>

animate() Method:

Based on your second commend you can use the animate() method to simulate the slide functionality.

The jQuery animate() method lets you create custom animations.

To slide the element to left: (Credits to JQGeek for his answer here.)

$('#buttonId').on('click', function(){
    $('#container').animate({width:'toggle'},350);
})

div{
  background-color: #a8a8ff;
  height: 100px;
  width: 350px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buttonId">Click Me!</button>
<div id="container"></div>

edited Oct 07 '17 at 09:59

answered Oct 07 '17 at 07:05

Ahmad Maleki

1,415
3
21
35

Yes bit how can i toggle the width of the container $('div.container').css({'width':'350px'}); – Dev Oct 07 '17 at 07:37
Yes thanks, but I want it to slide toggle from the left. Can i use this or do i need to use .animate? – Dev Oct 07 '17 at 08:49
@Dev I updated my answer again. Check it out for slide toggle functionality. – Ahmad Maleki Oct 07 '17 at 09:26
If i add content to the container, how do i slide that off as well? – Dev Oct 08 '17 at 07:51
@Dev This isn't actually an slide, it's more of a slide-like effect but we are toggling the `width` attribute. If you want an actual slide (moving the element inside and outside the view) I suggest you take a look at [this question](https://stackoverflow.com/questions/16989585/css-3-slide-in-from-left-transition) and the first two answers. – Ahmad Maleki Oct 08 '17 at 09:34
I'm referring to the content inside
Slide This Content
– Dev Oct 08 '17 at 09:52
@Dev I know but what I'm saying is that if you just simply have text inside it it will cut and disappear. But if you have something like `padding` attribute or some nested elements, my solution may not behave as expected. So in this case you should take a look at the above link I provided in my previous comment. – Ahmad Maleki Oct 08 '17 at 11:38
I did look at it but it doesn't provide the solution so the text slides off as well rather than crunch up. – Dev Oct 08 '17 at 11:56

score 1 · Answer 2 · answered Oct 07 '17 at 07:07

1

You can do like this

$(document).on('click', 'button_selector', function () {
    if (true) {
        // your code
    }
    else{
        // your code
    }
});

suggestion

you can use toggle for this

$(document).on('click', 'button_selector', function () {
    $('div.container').toggle();
});

answered Oct 07 '17 at 07:07

Ajay Kumar

1,314
12
22

Why do i need 'button_selector' – Dev Oct 07 '17 at 07:25
2

button which handle the event, you have to give that button selector like `id, class` or any other selector attribute – Ajay Kumar Oct 07 '17 at 07:28
The only problem i have with this is it doesn't toggle sideways – Dev Oct 07 '17 at 08:35
toggle will toggle your div or say element meaning it will appear or disappear your element like show or hide – Ajay Kumar Oct 07 '17 at 08:47
I want a slide toggle from the left Can i use this or do i need to use .animate? – Dev Oct 07 '17 at 08:48
you need to animate or use a toggleClass for this and make css class if you are using then might use if else in it – Ajay Kumar Oct 07 '17 at 08:50

score 0 · Answer 3 · edited Oct 07 '17 at 07:00

0

You can follow my code

$(function(){
   var firstClick = 0;
   $("button").click(function(){
       firstClick++;
       if(firstClick==2)
          $('div.container').hide();
       else
         $('div.container').show();
   });
})

edited Oct 07 '17 at 07:00

Pritamkumar

682
1
11
30

answered Oct 07 '17 at 06:52

Jinesh

1,554
10
15

How to Slide an Element Horizontally

3 Answers3