Slide Hiding a div with jQuery UI. How do I slide its adjacent div right along with it to take its place?

Question

Happy New Year!

I have a div that I would like to slide in and out of view with a button click. I would like its adjacent div to slide seamlessly alongside it to take it's place. At the moment the adjacent div does not move until the sliding animation is finished and then it jumps into the hidden div's place in one clunky motion.

How can I get them to slide together and hide one but not the other?

Right now I'm using jQuery UI, but maybe I should be using .animate()?

You'll get the best idea of what I'm trying to do here: http://www.redearthtrail.com/img/sampleapi5.php

Here's a jsFiddle to demonstrate as well:

JS

var state = false;

$("#toggle-slide-button").click(function () {
    if (!state) {
          $('#map-legend').hide("slide", { direction: "right"}, 1000);
        $('#toggle-slide-button img').attr('src', '/img/map-arrow-open.png');

          state = true;
        }
    else {
          $('#map-legend').show("slide", { direction: "right"}, 1000);
          $('#toggle-slide-button img').attr('src', '/img/map-arrow-close.png');

          state = false;
        }
});

CSS

#map-legend-control {
    width: 50px;
    height: 100%;
    margin: 0;
    padding: 0 20px;
    float: right;
    background-color: #000;
    position: relative;
  }
  #map-legend {
    width: 400px;
    height: 100%;
    margin: 0;
    padding: 0;
    float: right;
    position: relative;
    background-color: #CCC;
    -webkit-box-shadow:inset 1px 0 5px 0 rgba(000,000,00,1);
    box-shadow:inset 1px 0 5px 0 rgba(000,000,00,1);
  }
  #map-legend p {
    padding-left: 25px;
  }

HTML

<div id="map-legend">
  <p><strong>Trail Name:</strong></p>
  <p id="trail-id">Please select a trail.</p>

  <p><strong>Trail Difficulty:</strong></p>
  <p id="trail-difficulty">Please select a trail.</p>

  <p><strong>Trail Latitude:</strong></p>
  <p id="trail-lat">Please select a trail.</p>

  <p><strong>Trail Longitude:</strong></p>
  <p id="trail-long">Please select a trail.</p>

  <p><strong>Trail Thumbnail:</strong></p>
  <p id="trail-thumb">Please select a trail.</p>

  <div style="position:absolute;bottom:0;">
    <p><strong>Trail Sponsor:</strong></p>
    <p id="trail-sponsor">Please select a trail.</p>
  </div>
</div>

<div id="map-legend-control">
  <a href="#" id="toggle-slide-button"><img src="http://www.redearthtrail.com/img/map-arrow-close.png" width="50px" height="50px" /></a>
</div>

Thanks for any insight!

Answer 1

I definately think you are on the right track thinking toggle is the way to go. Check this fiddle out for my quick and dirty:

http://jsfiddle.net/GUjPA/13/

I made a one line change

$('#map-legend').animate({width: "toggle"}, 1000);

vs

$('#map-legend').hide("slide", { direction: "right"}, 1000);

  #map-legend p {
    padding-left: 25px;
    width: 400px;
  }

Full code here:

var state = false;

$("#toggle-slide-button").click(function () {
  if (!state) {
    $('#map-legend').animate({width: "toggle"}, 1000);
    $('#toggle-slide-button img').attr('src', 'http://www.redearthtrail.com/img/map-arrow-open.png');

      state = true;
    }
  else {
      $('#map-legend').animate({width: "toggle"}, 1000);
      $('#toggle-slide-button img').attr('src', 'http://www.redearthtrail.com/img/map-arrow-close.png');

      state = false;
    }
});

Answer 2

You can animate the control along with div. Push the div to right & hide the overflow-x

CSS

body{overflow-x: hidden}

Jquery

var state = false;

$("#toggle-slide-button").click(function () {
    if (!state) {
        $('#map-legend').animate({left: 410}, 1000);
        $('#map-legend-control').animate({left: 410}, 1000);
        $('#toggle-slide-button img').attr('src', 'http://www.redearthtrail.com/img/map-arrow-open.png');

          state = true;
        }
    else {
          $('#map-legend').animate({left: 0}, 1000);
        $('#map-legend-control').animate({left: 0}, 1000);
          $('#toggle-slide-button img').attr('src', 'http://www.redearthtrail.com/img/map-arrow-close.png');

          state = false;
        }
});

Demo http://jsfiddle.net/GUjPA/6/

Answer 3

Looking at your question, the reason you are getting the unusual jump with the button is because of the show/hide method. Either the element is hidden or shown. It cannot be both. This is a little difficult to understand at first. The div with the content is actually there even when it's being moved to the right. So when you click the button to hide the panel, it is being animated to move out of the way but still technically is occupying the space it was originally added to. The reverse for the other way. I would add a container around both the button and the panel. Then when slide right or left is selected, just animate the container to slide left/right according to the div's pixel size. It's never being hidden, just moved off screen.