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

Question

我在制作一个新网站。正如我正在做的是点击一个视频画廊向我显示一个模式视频，总共只显示1个带有文本的大视频和下面的3个视频，您可以在其中显示更多项目。我需要你用al-md-4列点击3个计算机元素，再点击显示更多新行。这一步我已经做了，但我有2个问题：

• 默认使用Javascript显示我2行，而不是仅仅一个，将在JS 1定义和展示我出现2

• 我也希望有是另一个“隐藏”按钮，每当我点击一行时就会隐藏起来。

然后我将完整的代码附加到我可以做的地方。

http://www.bootply.com/vLeA1VQoYF

需要帮助！ 非常感谢！从西班牙

Answer 1

问候这是我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; 
})); 

告诉我，如果我误解你，你需要别的东西。