Breeze1

columns

Через кастомные и @property
https://css-tricks.com/property/


https://codepen.io/AnnaSummer/pen/jOJMBzm

Если количество блоков не определено заранее, то как во флексах сделать не выйдет.

Если количество блоков фиксировано, то сделать можно. Нужно увеличить количество колонок до общего кратного всех вариантов количеств ячеек в строках. В данном случае вам нужно НОК от двух чисел - 4 и 3. Это 12 вроде бы.

Теперь задаете сетку в 12 колонок и раскидываете по ним блоки.

Можно выбранные элементы складывать в массив или Set(), и показывать его длину / размер.

Песочница: Codepen

const liked = new Set();

// ловить вообще все клики
document.addEventListener('click', e => {
  const el = e.target;
  if (!el.classList.contains('click')) return; // неинтересный клик
  if (liked.has(el)) { // уже выбран этот?
    liked.delete(el); // удалить
  } else {
    liked.add(el); // добавить
  }

  // пора показать что-нибудь
  document.querySelector('span.text').innerText = liked.size; // счётчик

  // список выбранных
  document.querySelector('span.list').innerText = [...liked.values()]
    .map(({innerText: t}) => t)
    .join(', ');
});

p.s. что-то и CodePen больше не позволяет вставляться в iframe в FireFox'е..

let count = 0;
const countEl = document.querySelector('.text');
const buttons = [...document.querySelectorAll('.click')];
const onClick = e => updateCount(e.target.classList.toggle('clicked') ? 1 : -1);
const updateCount = change => countEl.innerText = count += change;
buttons.forEach(n => n.addEventListener('click', onClick));
updateCount(buttons.reduce((acc, n) => acc + n.classList.contains('clicked'), 0));

skipSlider[i].noUiSlider.on('update', function(values, handle) {
    $(this.target).next().text(values[1])
    $(this.target).next().next().text(values[0])
  });

$(document).on('click', '.list li.active', function(){
  $('.button').addClass('blue')
})

<li>
    <a href="#" class="active">Item-4</a>
  </li>

$(document).ready(function(e){
  offsetleft = $('.active').scroll()[0].offsetLeft;
  $('.main-list').scrollLeft(offsetleft);
})

Запилил, добавил в codepen.io. Нужные доп. параметры выставь сам

stepsSlider.noUiSlider.on('change.one', function() {
  vals = stepsSlider.noUiSlider.get();
  var processed = vals.replace(/ /g, '');
  res = parseFloat(processed, 10);
  // Как то так https://refreshless.com/nouislider/more/#section-update
  stepsSlider2.noUiSlider.updateOptions({
        range: {
            'min': 0,
            'max': res
        }
    });
});

Проблема была не в области видимости. Просто ты не посмотрел пример из документации . Там справа есть кнопка Updating the slider with new options on button click нажми на нее и увидишь примеры.

.on('beforeChange', function(e, slick, currSlide, nextSlide) {
  $('.tabs-content__item').hide().eq(nextSlide).fadeIn();
});

- .dropdown__block.open {
+ .dropdown.open .dropdown__block {

const containerSelector = '.dropdown';
const buttonSelector = `${containerSelector} .dropdown__toggler`;
const activeClass = 'open';


// jquery, как вы и хотели
$(document).on('click', ({ target: t }) => {
  const $container = $(t).closest(containerSelector);
  const $button = $(t).closest(buttonSelector);

  if ($button.length) {
    $container.toggleClass(activeClass);
  }

  $(containerSelector).not($container).removeClass(activeClass);
});

// или, к чёрту jquery
document.addEventListener('click', ({ target: t }) => {
  const container = t.closest(containerSelector);
  const button = t.closest(buttonSelector);

  if (button) {
    container.classList.toggle(activeClass);
  }

  document.querySelectorAll(containerSelector).forEach(n => {
    if (n !== container) {
      n.classList.remove(activeClass);
    }
  });
});

Да, это возможно.

Показать только при клике по текущему элементу:

$('.block').click(function(e){
  var $this = $(this);
  var $target = $(e.target);
  
  if($this.is($target)) {
    $('.hidden').slideToggle();
  }
});

Показать при клике на все, что угодно, кроме вложенных внутрь блоков с атрибутом 'href':

$('.block').click(function(e){
  var $target = $(e.target);
  
  if(!$target.attr('href')) {
    $('.hidden').slideToggle();
  }
});

vh + 'px'

и стрелочную функцию нужно поменять на обычную

Убери mouseup и поставь on('click' либо просто click

$(document).on('click', function(e) 
{
    var container = $(".dropdown");
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

По умолчанию кнопки пусть будут красными (типа активные), а те, что расположены после активной перекрашиваете в синий (неактивные):

.slick-dots {
  li button {
    background-color: red;
  }

  li.slick-active ~ li button {
    background-color: blue;
  }
}

$('.wrap .block').each(function(i){
  var height = $(this).height()
  var item = $('.wrap').eq(i).find('.item');
  item.css({
    'height': height
  })
})

Где элементы находятся, что за элементы, какой класс будем добавлять/удалять:

const containerSelector = 'ul';
const itemSelector = 'li';
const activeClass = 'active';

Хотели на jquery? - ну типа вот:

const $containers = $(containerSelector).on('click', itemSelector, function(e) {
  const index = $(itemSelector, e.delegateTarget).index(this);
  $containers.find(`${itemSelector}.${activeClass}`).removeClass(activeClass);
  $containers.find(`${itemSelector}:eq(${index})`).addClass(activeClass);
});

Или, к чёрту jquery:

const containers = document.querySelectorAll(containerSelector);
containers.forEach(n => n.addEventListener('click', onClick));

function onClick(e) {
  const item = e.target.closest(itemSelector);
  if (item) {
    const index = [...this.querySelectorAll(itemSelector)].indexOf(item);
    containers.forEach(container => {
      container.querySelectorAll(itemSelector).forEach((n, i) => {
        n.classList.toggle(activeClass, i === index);
      })
    });
  }
}

замените "() =>" на обычную функцию