https://molexpert.ru/bitrix/templates/molexpert/js/blog.js

1$(function () {
2  //tabs
3  let currentTab = 'all';
4  let activeItems = 7;
5  let currentVisibles = 7;
6  let countBlogs = $('[data-blog]').length;
7  console.log(countBlogs);
8  //first loading
9  for (var i = 0; i < activeItems; i++) {
10    if (i == 0) {
11      $('[data-blog]').eq(i).addClass('big');
12    }
13    $('[data-blog]').eq(i).addClass('active');
14  }
15
16  //add new items
17  $('.blog-btn .button').on('click', function (evt) {
18    evt.preventDefault();
19    let newCurrentVisibles = currentVisibles + activeItems;
20    if (currentTab != 'all') {
21      countBlogs = $(`[data-blog="${currentTab}"]`).length;
22      for (var i = currentVisibles; i < newCurrentVisibles; i++) {
23        $(`[data-blog="${currentTab}"]`).eq(i).addClass('active');
24      }
25    } else {
26        countBlogs = $(`[data-blog]`).length;
27      for (var i = currentVisibles; i < newCurrentVisibles; i++) {
28        $('[data-blog]').eq(i).addClass('active');
29      }
30    }
31
32    currentVisibles = newCurrentVisibles;
33
34    console.log(countBlogs,currentVisibles);
35    if (countBlogs <= currentVisibles) {
36      $('.blog-btn').addClass('disabled');
37    }
38  });
39
40  //change tab
41  $('[data-tab]').on('click', function () {
42    let tabName = $(this).attr('data-tab');
43    currentTab = tabName;
44
45    $('[data-tab]').removeClass('current');
46    $(this).addClass('current');
47
48    $('[data-blog]').removeClass('active').removeClass('big');
49
50    currentVisibles = activeItems;
51
52    //add blogs
53    for (var i = 0; i < currentVisibles; i++) {
54      if (tabName != 'all') {
55        if (i == 0) {
56          $(`[data-blog="${tabName}"]`).eq(i).addClass('big');
57        }
58        $(`[data-blog="${tabName}"]`).eq(i).addClass('active');
59      } else {
60        if (i == 0) {
61          $('[data-blog]').eq(i).addClass('big');
62        }
63        $(`[data-blog]`).eq(i).addClass('active');
64      }
65    }
66
67    //countBlogs
68    if (currentTab != 'all') {
69      countBlogs = $(`[data-blog="${currentTab}"]`).length;
70    } else {
71      countBlogs = $(`[data-blog]`).length;
72    }
73
74    if (countBlogs <= currentVisibles) {
75      $('.blog-btn').addClass('disabled');
76    } else {
77      $('.blog-btn').removeClass('disabled');
78    }
79  });
80});