Show and Hide 1 row of elements with JavaScript and Bootstrap

Question

I am making a new website. As is what I'm doing is a gallery of videos by clicking shows me a video in modal, in total only shows me 1 large video with text and small 3 videos below where you can display more items. I need you to click show me more out a new row with 3 computer elements by al-md-4 columns. This step I have done but I have 2 problems:

• Default with Javascript shows me 2 rows instead of just one, will define in the JS 1 and showing me appear 2

• I also wish there was another button to "hide" and was hiding whenever I click a row.

Then I attached the complete code to where I could do.

http://www.bootply.com/vLeA1VQoYF

Need help!! Thank you so much! Greetings from Spain

Answer 1

Here is my fiddle

And 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;
}));

Tell me if I misunderstood you and you need something else.