jquery panel slide Out and In + scrolling

Hey all I have the following code that supposed to slide a div on top of a google map to show location information.

However, it doesn't seem to want to slide at all. Once it hit the test button click to slide panel it just seems to pop into place instead of sliding in/out. It also seems to have messed up my scrolling for that div as well. I can no longer scroll through the information using the overflow-x scroll-bar.

It should slide in from the right side in the corner as shown here in the image:

$(document).ready(function () {
    load();

    $('#click').click(function() {
        $('.slider').toggle("slide", {
            direction: "left",
            distance: -180
        }, 500);
    });
});

function load() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(40, -100),
        zoom: 4,
        mapTypeId: 'roadmap',
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
    });

    infoWindow = new google.maps.InfoWindow();
    locationSelect = document.getElementById("locationSelect");

    locationSelect.onchange = function() {
        var markerNum = locationSelect.options[locationSelect.selectedIndex].value;

        if (markerNum != "none"){
            google.maps.event.trigger(markers[markerNum], 'click');
        }
    };
}

And the HTML for it:

<div>
    <div align="center" id="zipBox">
            Zip code: <input type="text" id="addressInput" size="10" style="border: solid 1px #000000; width: 40px;" maxlength="5" />
            Radius: <select id="radiusSelect" style="border: solid 1px #000000;">
                <option value="5" selected="selected">05 miles</option>
                <option value="10">10 miles</option>
                <option value="15">15 miles</option>
                <option value="20">20 miles</option>
                <option value="25">25 miles</option>
                <option value="30">30 miles</option>
                <option value="40">40 miles</option>
                <option value="50">50 miles</option>
                <option value="60">60 miles</option>
                <option value="70">70 miles</option>
            </select>

            <input type="button" id="searchButton" value="Search" style="border: solid 1px #000000;" />
    </div>
    <div>
        <select id="locationSelect" style="width:100%;visibility:hidden"></select>
          <div align="right" class="slider">
              <p align="center">
                  <div dir='ltr' align="center">
                      <strong>Event Location:</strong><br>
                      This is the event name here!<br>
                      1510 E Woodlands St
                  </div>
                  <div align="center" style="border-bottom: 1px solid #CCC;">
                      <strong>Event Dates/Times:</strong><br>
                      11/25/2014 @ 10:00AM
                  </div>
              </p>
              <p align="center">
                  <div dir='ltr' align="center">
                      <strong>Event Location:</strong><br>
                      This is the event name here!<br>
                      1510 E Woodlands St
                  </div>
                  <div align="center" style="border-bottom: 1px solid #CCC;">
                      <strong>Event Dates/Times:</strong><br>
                      11/25/2014 @ 10:00AM
                  </div>
              </p>
              <p align="center">
                  <div dir='ltr' align="center">
                      <strong>Event Location:</strong><br>
                      This is the event name here!<br>
                      1510 E Woodlands St
                  </div>
                  <div align="center" style="border-bottom: 1px solid #CCC;">
                      <strong>Event Dates/Times:</strong><br>
                      11/25/2014 @ 10:00AM
                  </div>
              </p>
              <p align="center">
                  <div dir='ltr' align="center">
                      <strong>Event Location:</strong><br>
                      This is the event name here!<br>
                      1510 E Woodlands St
                  </div>
                  <div align="center" style="border-bottom: 1px solid #CCC;">
                      <strong>Event Dates/Times:</strong><br>
                      11/25/2014 @ 10:00AM
                  </div>
              </p>
              <p align="center">
                  <div dir='ltr' align="center">
                      <strong>Event Location:</strong><br>
                      This is the event name here!<br>
                      1510 E Woodlands St
                  </div>
                  <div align="center" style="border-bottom: 1px solid #CCC;">
                      <strong>Event Dates/Times:</strong><br>
                      11/25/2014 @ 10:00AM
                  </div>
              </p>
              <p align="center">
                  <div dir='ltr' align="center">
                      <strong>Event Location:</strong><br>
                      This is the event name here!<br>
                      1510 E Woodlands St
                  </div>
                  <div align="center" style="border-bottom: 1px solid #CCC;">
                      <strong>Event Dates/Times:</strong><br>
                      11/25/2014 @ 10:00AM
                  </div>
              </p>
          </div>
    </div>
    <div id="mapAndInfo">
        <div id="map" style="width: 800px; height: 600px"></div>
    </div>
        <div id="click" style="background: #000; color: #fff; width: 300px; height: 30px;">click to slide panel
    </div>
</div>

And now the CSS:

body {
    overflow-x: hidden;
    margin:0px;
    padding:0px;
}

#zipBox {
    position: absolute;
    margin-top: 598px;
    width: 798px;
    z-index: 10000;
    border: 1px solid #CCC;
    background: rgb(255,255,255);
    background: transparent\9;
    background: rgba(255,255,255,0.3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cffffff,endColorstr=#4cffffff);
}

.slider {
    position: absolute;
    z-index: 10002;
    width: 170px;
    height: 590px;
    left: 320px;
    border: solid 1px #CCC;
    padding: 5px;
    right: -280px;
    overflow: scroll;
    overflow-x: hidden;
    background: rgb(255,255,255);
    background: transparent\9;
    background: rgba(255,255,255,0.8);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffff);
    display: none;
}

Check out the JSFiddle of it!

Well, you don't have jquery-ui loaded in your fiddle. Your code works fine, I changed the CSS on .slider to

position: absolute;
...
right: 0;

and took out the left property. I don't know if that's what you wanted. But HERE's a working demo. Cheers.