使用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; 
})); 

告訴我，如果我誤解你，你需要別的東西。