停止响应站点上的元素下面移动jQuery Slider

Question

使用jQuery slideDown / Up功能，滑块下方的所有内容都会上下移动。我只希望滑块内的内容移动。

使用overflow：hidden或使用position：absolute设置固定高度并不理想，因为这是一个响应式网站。

有人能引导我朝着正确的方向前进吗？

如果有帮助的话，这里有一些精简代码。谢谢！

    <div class="videos">
    <ul class="vidnav nav-font">    
    <a class="speaker1-mini" href="#"><li>Animation</li></a>
    <a class="speaker2-mini" href="#"><li>Demo Reel</li></a>
    <a class="speaker3-mini" href="#"><li>Business Video</li></a>
</ul>

<section class="gallery">
    <div class="speaker1-content">111</div>
    <div class="speaker2-content">222</div>
    <div class="speaker3-content">333</div>
    </section>
    </div>

    $("[class*='-content']").hide();
    $("[class*='-mini']").hide();
    $("[class*='-expand']").hide();

    $('[class^="speaker"]').click(function () {
        //Hide it all! retract on click
        $("[class*='-content']").slideUp();
        $("[class*='-mini']").slideDown();
        var divClass = $(this).attr("class").split("-")[0] + "-content";
        $("." + divClass).slideDown("slow");
    });