Показывать блоки на подобии ajax подгрузки

159

29 сентября 2018, 02:10

Как можно реализовать подгрузку блоков на подобии ajax подгрузки записей или товаров?

Есть страничка на чистом HTML без базы данных, где отображаются 12 блоков (по 4 в ряд) и ниже кнопка показать еще, при клике на нее показывается еще 4 блока и т.д., после отображения всех блоков кнопка исчезает.

Пробовал искать, но как-то безуспешно(

Буду очень признателен за помощь.

  <div id="options">
    <div id="filters" class="button-group js-radio-button-group">
      <button class="btn btn-main is-checked" data-filter="*">Показать все</button>
      <button data-filter=".red" class="btn btn-main">Красный</button>
      <button data-filter=".blue" class="btn btn-main">Синий</button>
      <button data-filter=".green" class="btn btn-main">Зеленый</button>
    </div>
  </div>
  <div class="row isotope">
    <div class="rows">
      <div class="item blue red"></div>
      <div class="item green"></div>
      <div class="item blue"></div>
      <div class="item green"></div>
    </div>
    <div class="rows">
      <div class="item blue"></div>
      <div class="item green red"></div>
      <div class="item blue"></div>
      <div class="item green"></div>
    </div>
    <div class="rows">
      <div class="item blue"></div>
      <div class="item green"></div>
      <div class="item blue red"></div>
      <div class="item green"></div>
    </div>
    <div class="rows">
      <div class="item blue red"></div>
      <div class="item green"></div>
      <div class="item blue"></div>
      <div class="item green red"></div>
    </div>
  </div>
<div class="more-block text-center">
  <button id="more">Показать еще</button>
</div>

<script>
jQuery(function($) {
  $('.rows:lt(1)').show();
  $('#more').click(function() {
    const row = $('.rows:hidden');
    row.first().show();
    if (row.length === 1)
      $(this).hide();
  });
});
jQuery(function($) {
  var $container = $('.isotope');
  // filter buttons
  $('#filters button').click(function(){
  var $this = $(this);
      // don't proceed if already selected
      if ( !$this.hasClass('is-checked') ) {
        $this.parents('#options').find('.is-checked').removeClass('is-checked');
        $this.addClass('is-checked');
      }
    var selector = $this.attr('data-filter');
    $container.isotope({  itemSelector: '.item', filter: selector });
    return false;
  });    
});
</script>

Answer 1

jQuery(function($) { 
  $('.row:lt(4)').show(); 
   
  $('#more').click(function() { 
    const row = $('.row:hidden'); 
    row.first().show(); 
    if (row.length === 1) 
      $(this).hide(); 
  }); 
});

.row, .btn { 
  clear: left; 
} 
 
.row { 
  display: none; 
} 
 
.row div { 
  float: left; 
  margin: 5px 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="row"> 
  <div>1.1</div> 
  <div>1.2</div> 
  <div>1.3</div> 
  <div>1.4</div> 
</div> 
<div class="row"> 
  <div>2.1</div> 
  <div>2.2</div> 
  <div>2.3</div> 
  <div>2.4</div> 
</div> 
<div class="row"> 
  <div>3.1</div> 
  <div>3.2</div> 
  <div>3.3</div> 
  <div>3.4</div> 
</div> 
<div class="row"> 
  <div>4.1</div> 
  <div>4.2</div> 
  <div>4.3</div> 
  <div>4.4</div> 
</div> 
<div class="row"> 
  <div>5.1</div> 
  <div>5.2</div> 
  <div>5.3</div> 
  <div>5.4</div> 
</div> 
<div class="row"> 
  <div>6.1</div> 
  <div>6.2</div> 
  <div>6.3</div> 
  <div>6.4</div> 
</div> 
<div class="row"> 
  <div>7.1</div> 
  <div>7.2</div> 
  <div>7.3</div> 
  <div>7.4</div> 
</div> 
<div class="btn"> 
  <button id="more">More</button> 
</div>