jQuery slide panel move content together with toggle

Question

I need to make that toggle would move together with the panel. Tried almost everything but can't get it to work. Here is my fiddle.

HTML

  <div id="toggle">Toggle</div>
  <div id="popout">content</div>

jQuery

(function($) {
$('#toggle').toggle( 
function() {
    $('#popout').animate({ right: 0 }, 'slow');
}, 
function() {
    $('#popout').animate({ right: -250 }, 'slow');
}
);
})(jQuery);

CSS

#popout {
position: fixed;
width: 250px;
background-color: #EBEBEB;
color: black;
top: 0px;
right: -250px;
overflow:auto;
transition: 500ms transform ease-in-out;
height: 100px;
}
#toggle {
float: right;
position: absolute;
right: 32px;
width: 40px;
height: 40px;
}

I'd really appreciate any help.

Roko C. Buljan · Accepted Answer · 2015-05-02T16:43:56.137

One way would be to put your button inside the sliding parent

jsFiddle

<div id="popout">
    <div id="toggle">Toggle</div>
    Now the button animates with me! yey
</div>

CSS:

#popout {
    position: fixed;
    width: 250px;
    background-color: #EBEBEB;
    color: black;
    top: 0px;
    right: -250px;
    transition: 500ms transform ease-in-out;
    height: 100px;
}

#toggle {
    position: absolute;
    right: 250px; /* same as parent width */
    width: 40px;
    height: 40px;
}

Note also that the way you're using .toggle(cb1, cb2) is deprecated from jQuery 1.8 and removed since jQuery 1.9 so if one day you'll wish to update jQuery to a current version you'll have to toggle a different way like:

$('#toggle').click(function(){
    var io = this.io ^= 1; // Toggles 1,0,1,0,1....
    $('#popout').animate({ right: io ? 0 : -250 }, 'slow');
});

demo using jQuery 2.1.3

or without a 1/0 toggle you can retrieve the current right position of your element:

var $popout = $('#popout')
$('#toggle').click(function(){
    var isRight = parseInt($popout.css("right"), 10) < 0;
    $('#popout').animate({ right: isRight ? 0 : -250 }, 'slow');
});

demo using the current right position

CSS3 transition and jQuery to toggle state

keeping always the button inside the sliding parent, you can use CSS3 to perform the animation, and toggle the class on click using jQuery like:

jQuery(function( $ ) {

  $('#toggle').click(function(){
    $("#popout").toggleClass("opened");
  }); 

});

#toggle {
  position: absolute;
  right: 290px; /* push it right */
  width: 40px;
  height: 40px;
}
#popout {
  position: fixed;
  width: 250px;
  height: 100px;
  background-color: #EBEBEB;
  top: 0px;
  right: -250px;
  /*overflow:auto; REMOVE SO WE CAN SEE THE INNER BUTTON */
  /* SET OVERFLOW TO AN INNER CONTENT DIV IF NEEDED */
  transition: 0.5s;
}
#popout.opened{ /* opened class is toggled by jQ */
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popout">
    <div id="toggle">Toggle</div>
    content
</div>

jQuery slide panel move content together with toggle

1 Answers1

CSS3 transition and jQuery to toggle state