There is a block of 5 pictures and descriptions.

Under this block there is a button in which if you click on something below, a further such block appears smoothly. How to make it appear when this block appears, it pushes the button down. That is, there may be 500 such blocks and they will appear at 5 and the button should always be below

help me please

Look at the full width in order to understand the essence of the question, but in small screens it’s not very.

 // var b = $('body'); var isToggled = false; // var origTextStr = b.find('button').text(); $(document).on('click', 'button', function(){ var t = $(this), next = t.nextAll('.group:first'), nextObj = t.nextAll('.design_block'); // изменить текст кнопки при клике на него if( !isToggled ) { t.text('Hide more'); } else { t.text(origTextStr); } //взять высоту блока var nextHeight = next.height() + 'px'; // добавить трансформ на 'next' if( !isToggled ){ nextObj.css('transform', 'translateY('+ nextHeight +')'); next.addClass('on'); //добавить класс ('on'); isToggled = true; } else { nextObj.css('transform','translateY(0)'); next.removeClass('on'); isToggled = false; } }); 
 body.on { overflow: hidden; } .our_works { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; overflow: hidden; } .our_works .design_block { width: 210px; margin-bottom: 20px; overflow: hidden; backface-visibility: hidden; } .our_works .architecture_img { width: 210px; height: 198px; } .our_works .more_posts { margin-top: 15px; border-radius: 2px; background-color: #2a323d; padding: 12px 0 13px 0; color: #fff; width: 200px; border: none; margin: 0 auto; } .our_works .more_posts a { color: #fff; } .our_works .more_posts a:hover { text-decoration: none; } .group { display: flex; justify-content: space-between; width: 100%; } .group .design_block { opacity: 0; transform: translateY(100px); visibility: hidden; } .group .design_block:nth-child(1) { transition-delay: 0.1s; } .group .design_block:nth-child(2) { transition-delay: 0.15s; } .group.on .design_block { opacity: 1; transform: translateY(0); visibility: visible; } .design_block { transform: translateY(0); transition: all 1s cubic-bezier(0.4, 0, 0, 1); width: 100%; z-index: 1; } 
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="our_works"> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY HOMES</h6> <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6> <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">ARCHITECTURE</h6> <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY HOMES</h6> <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6> <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div> </div> <!-- Button goes here --> <button class="more_posts"> <a href="javascript:void(0)">More</a> </button> <!-- hidden blocks --> <div class="group"> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY HOMES</h6> <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6> <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">ARCHITECTURE</h6> <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY HOMES</h6> <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6> <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div> </div> </div> </div> </div> </div>

  • Where is the button? - Roman C
  • @RomanC yes there even comments are there how can you not see it? - Demon __ ANT
  • Move button out of the box .our_works - Stepan Kasyanenko
  • @StepanKasyanenko exactly? And try to make yourself see what happens - Demon __ ANT

1 answer 1

As was said, the button is best taken outside the .our_works block. Then it will always be below, regardless of the number of blocks.

Example.

 // var b = $('body'); var isToggled = false; // var origTextStr = b.find('button').text(); $(document).on('click', 'button', function() { var t = $(this), next = $('.our_works .group:not(.on):first'); //взять высоту блока var nextHeight = 340; // Здесь надо вычислить высоту блока. Пока что хард кодом забьем next.addClass('on'); next.height(nextHeight); if (!$('.our_works .group:not(.on):first').length) { //Больше блоков на показ нету t.hide("hide_opacity"); } }); 
 body.on { overflow: hidden; } .our_works { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; overflow: hidden; } .our_works .design_block { width: 210px; margin-bottom: 20px; overflow: hidden; backface-visibility: hidden; } .our_works .architecture_img { width: 210px; height: 198px; } .more_posts { margin-top: 15px; border-radius: 2px; background-color: #2a323d; padding: 12px 0 13px 0; color: #fff; width: 200px; border: none; margin: 0 auto; transition: opacity 1s cubic-bezier(0.4, 0, 0, 1); } .more_posts a { color: #fff; } .more_posts a:hover { text-decoration: none; } .group { display: flex; justify-content: space-between; width: 100%; overflow: hidden; height: 0; transition: height 1s cubic-bezier(0.4, 0, 0, 1); } .group .design_block { opacity: 0; transform: translateY(100px); } .group .design_block:nth-child(1) { transition-delay: 0.1s; } .group .design_block:nth-child(2) { transition-delay: 0.15s; } .group.on .design_block { opacity: 1; transform: translateY(0); } .design_block { transform: translateY(0); transition: all 1s cubic-bezier(0.4, 0, 0, 1); width: 100%; z-index: 1; } 
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="our_works"> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY HOMES</h6> <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6> <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">ARCHITECTURE</h6> <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY HOMES</h6> <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6> <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div> </div> <!-- hidden blocks --> <div class="group"> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY HOMES</h6> <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6> <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">ARCHITECTURE</h6> <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY HOMES</h6> <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6> <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div> </div> </div> <!-- hidden blocks --> <div class="group"> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY HOMES</h6> <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6> <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">ARCHITECTURE</h6> <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY HOMES</h6> <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6> <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div> </div> </div> <!-- hidden blocks --> <div class="group"> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY HOMES</h6> <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6> <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">ARCHITECTURE</h6> <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY HOMES</h6> <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6> <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div> </div> </div> <!-- hidden blocks --> <div class="group"> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY HOMES</h6> <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6> <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">ARCHITECTURE</h6> <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY HOMES</h6> <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> </div> <div class="design_block"> <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6> <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div> </div> </div> </div> <!-- Button goes here --> <button class="more_posts"> <a href="javascript:void(0)">More</a> </button> </div> </div>

  • Thanks a lot, I just didn’t work, and js-ohm didn’t work out a plus sign from me - Demon __ ANT