使用 JavaScript 和 Bootstrap 显示和隐藏 1 行元素

Show and Hide 1 row of elements with JavaScript and Bootstrap

我正在制作一个新网站。正如我正在做的那样,通过单击显示一个视频库以模式显示视频,总共只显示 1 个带文本的大视频和下面的 3 个小视频,您可以在其中显示更多项目。我需要你点击 show me more out a new row with 3 computer elements by al-md-4 columns。这一步我已经完成了,但是我有两个问题:

然后我把完整的代码附在我能做的地方。

http://www.bootply.com/vLeA1VQoYF

需要帮助!! 太感谢了!来自西班牙的问候

这是我的fiddle

和 JS:

    $('.mydata:gt(0)').hide().last().after(
    $('<a />').attr('href','#').attr('id','btn_less').text('Show less').click(function(){
        var a = this;
        $('.mydata:visible:gt(0)').last().fadeOut(function(){
          if ($('.mydata:visible:gt(0)').length == 0) {
            $(a).hide();
          } else if($("#btn_more:not(:visible)")){
            $("#btn_more").show();
          }   
        });
        return false;
    })
).after($('<span />').text(' ')
).after(
    $('<a />').attr('href','#').attr('id','btn_more').text('Show more').click(function(){
    var a = this;
    $('.mydata:not(:visible):lt(1)').fadeIn(function(){
      if ($('.mydata:not(:visible)').length == 0) {
        $(a).hide(); 
      } else if($("#btn_less:not(:visible)")){
        $("#btn_less").show();
      }
    }); return false;
}));

如果我误解了你,请告诉我,你还需要其他东西。