slideToggle, fadeIn, fadeOut animation shifts up during animation

I’m creating a simple “Read More/Read Less” button for a WordPress site that when pressed reveals hidden content using slideToggle. It’s in the form of a WordPress plugin. The buttons fadeIn and fadeOut. And I’m using php/html to display the page.

Everything is working great except one little hiccup. For some reason, when the Read More button is clicked and the animation starts, the content div (or p tag – I can’t tell for sure) starts a few pixels down and then shifts up after it finishes the animation. And vice versa, when the Read Less button is clicked, the animation does the same thing.

I’ve looked through the php and css and I can’t find anything. I’ve even inspected the elements and removed all the css that way but it’s not helping.

I’ve included all the code and a short video to show you what I mean.

Here is the link to the video: https://youtu.be/3LnmaPglyPI

Javascript

jQuery('.wpsm-content').addClass('wpsm-content-hide');
jQuery('.wpsm-show, .wpsm-hide').removeClass('wpsm-content-hide');
jQuery('.wpsm-show').on('click', function (e) {
    "use strict";
    var currentContent = jQuery(this);
    function complete() {
        jQuery(currentContent).next('.wpsm-content').slideToggle(800);
    }
    jQuery(this).fadeOut(200, complete);
    e.preventDefault();
});
jQuery('.wpsm-hide').on('click', function (e) {
    "use strict";
    var wpsm = jQuery(this).parent('.wpsm-content');
    function complete() {
        wpsm.prev('.wpsm-show').fadeIn(200);    // Read More
    }
    wpsm.slideToggle(1250, complete);
    e.preventDefault();
});

CSS

.wpsm-show a, .wpsm-show:active, .wpsm-show:visited {
   cursor: pointer;
   text-decoration: none;
}
.wpsm-show:hover {
   cursor: pointer;
   text-decoration: underline;
}
.wpsm-hide a, .wpsm-hide:active, .wpsm-hide:visited {
   cursor: pointer;
   text-decoration: none;
}
.wpsm-hide:hover {
   cursor: pointer;
   text-decoration: underline;
}
.wpsm-content-hide {
  display: none;
}

PHP/HTML

add_shortcode( 'show_more', 'wpsm');
function wpsm( $attr, $smcontent ) {
  if (!isset($attr['color'])) $attr['color'] = '#cc0000';
  if (!isset($attr['list'])) $attr['list'] = '';
  if (!isset($attr['more'])) $attr['more'] = 'show more';
  if (!isset($attr['less'])) $attr['less'] = 'show less';
  $wpsm_string  = '<div class="show_more">';
  $wpsm_string .= '<p class="wpsm-show" style="color: ' . $attr['color'] . ' ">'; 
  $wpsm_string .= $attr['list']. ' '  . $attr['more'];
  $wpsm_string .= '</p><div class="wpsm-content">';
  $wpsm_string .= $smcontent;
  $wpsm_string .= ' <p class="wpsm-hide" style="color: ' . $attr['color'] . ' ">'; 
  $wpsm_string .= $attr['list']. ' '  . $attr['less'];
  $wpsm_string .= '</p>';
  $wpsm_string .= '</div></div>';
  return $wpsm_string;
}

add_action( 'wp_enqueue_scripts', 'sm_scripts');
function sm_scripts (){
  $plugin_url = plugins_url( '/', __FILE__ );
  wp_enqueue_style (
    'sm-style',
    $plugin_url . 'wpsm-style.css'
  );
  wp_enqueue_script (
    'sm-script',
    $plugin_url . 'wpsm-script-mine.js',
    array( 'jquery' ),
    '1.0.1',
    true
  );
}

add_action('wp_footer', 'sm_scripts');
?>