jQuery: slide in from right side only

Question

I've figured out how to integrate the jQuery slide toggle function to make my caption slide in/out over my image, but it's sliding in from the bottom right corner and I want it to slide only from the right side.

I have to keep the paragraph formatting and position at the bottom of the caption, with the semi-transparent white padding spanning the entire height of the responsive image. Any help is much appreciated!

UPDATE: I seem to have it working on this jsFiddle, but still not on the website. Demo: http://jsfiddle.net/tyuth1sr/16/

Active page: http://parkerrichard.com/studiogreen/html/schools-caption-test.html

jQuery:

    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "fade"
      });
    });

    $("#slideshow").click(function() {
      $( ".flex-caption" ).toggle( "slide" );
    });

CSS:

/* flexslider styling */

.flexslider {
    background:none !important;
    border:none !important;
    box-shadow:none !important;
}

.slides {
    overflow: hidden !important;
}

.right {
    right: 0;
    margin-bottom: 0px;
}

.flex-caption {
    position: absolute;
    text-align: left;
    background:rgba(255, 255, 255, 0.7);
    z-index: 1;
    padding: 20px;
    width: 295px;
    padding-top: 100%;
    bottom: 0px;
    display: none;
}

.show-caption {
    position: absolute;
    top: 48%;
    right: 100px;
    z-index: 100;
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    pointer-events: none;
}

Answer 1

If you want to use JQuery toggle() function to make them slide in from right, you will need to use JQuery UI effects
EDIT:
You said you are already using JQuery UI, so just use the direction configuration:
$('.caption-content').show("slide", { direction: "left" }, 1000);
JQuery UI API on toggle("slide")