L_B_A

const icons = {
  one: [ 'url иконки раскрытия одного элемента', 'и закрытия' ],
  all: [ 'url иконки раскрытия всех', 'что здесь должно быть, думаю догадаетесь' ],
};

const getState = el => $(el)
  .closest('.team__info-worklog')
  .find('.worklog-table')
  .get()
  .map(n => $(n).is(':visible'));

const setState = (el, state) => $(el)
  .closest('.team__info-worklog')
  .find('.worklog-table').each((i, n) => $(n)[state[i] ? 'slideDown' : 'slideUp']()).end()
  .find('.worklog-expend-all img').attr('src', icons.all[+state.some(Boolean)]).end()
  .find('.worklog-list__expend img').attr('src', i => icons.one[+state[i]]);

const createUpdater = f => e => setState(e.target, f(getState(e.target), e));


$('.worklog-expend-all').on('click', createUpdater(state => {
  return Array(state.length).fill(!state.some(Boolean));
}));

$('.team__info-worklog').on('click', '.worklog-list__expend', createUpdater((state, e) => {
  const index = $(e.target).closest('.worklog-list__row').index();
  return state.map((n, i) => i === index ? !n : n);
}));

Найти текущий активный элемент
Удалить класс на нем
От него найти следующий
Сделать следующий активным
Примерно так

const active = $('.block__item-box.active')
active.removeClass('active');
active.parent().next().find('.block__item-box').addClass('active')

Ну строго говоря для решения задачи "на CSS добавить внутри квадрата квадраты меньше и другим цветом" достаточно одного div-элемента (нет нужды добавлять новый элемент на каждый декоративный квадрат).



Но лучше все же уточнить у задавшего вопрос, что значит "не стереть локти" в его понимании.

С помощью чего и как можно реализовать вот такую расстановку блоков?

На ум сразу приходит masonry.

На js - masonry.
На flexbox - вижу решение: flex-flow: column wrap и задать высоту контейнера

Легко и просто! На чистом CSS сделал: https://codepen.io/CitizenOne/pen/abzOJYK

Можно даже без FLEX сделать

Это column count

.blog__block {
    column-count:3;
}

.blog__item {
    width:100%;
  margin-bottom: 30px;
    border-radius: 4px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);
}

По полному пути запускается? Мб он из $PATH выпал?

Подскажите, пожалуйста, как реализовать вот такое выпадающее меню с подчеркиванием только на первом уровне?

Например, вот так:
https://codepen.io/hisbvdis/pen/xxKaNmb?editors=1100

В начале функции нужно проверять, не ушел ли n за пределы.

function showSlides(n) {
    var pos = document.getElementsByClassName("position");
    var isOutOfRange = n > pos.length || n < 1;
    if (isOutOfRange) return;
    ...

Заскриньте вывод команды: nano ~/.profile

.news-img {
  vertical-align: middle;
}

и уберите везде float: left

Ну, например

.news-container {
      display: flex;
      align-items: center;
    }

на градиентах можно

https://jsfiddle.net/xo5rwgzq/26/

так


или так

а если флексом пользоваться ?
или обнулить все отступы и сделать img блоком
https://codepen.io/topicstarter/pen/KGNBPK

Делайте через псевдоэлемент, вариант с фотошопом костыль.

.position-container {
   position: relative;
}
.position-container:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(https://hsto.org/webt/5b/ac/ff/5bacff616663f822951184.jpeg); 
    width: 100%;
    height: 100%;
    opacity : 1;
    z-index: -1;
}

Вот так можно спрашивать у Яндекс, Гугл наверное тоже ответит.