Cacher is the code snippet organizer for pro developers

// ==UserScript==
// @name        Trello Collapsible List
// @namespace   https://gist.github.com/tkrkt
// @include     https://trello.com/b/*
// @version     2
// @grant       none
// ==/UserScript==

const collapsedWidth = '120px';

const wait = callback => {
  setTimeout(() => {
    document.querySelector('#board .js-list') ? callback() : wait(callback);
  }, 1000);
};

wait(() => {
  const createButton = (cards, callback) => {
    const button = document.createElement('div');
    button.style.right = '30px';
    button.className = 'list-header-extras';
    button.innerHTML = `
<a class="list-header-extras-menu dark-hover" href="#">
<span class="icon-sm" style="font-family: 'Helvetica Neue',Arial,Helvetica,sans-serif"></span>
</a>`;
    const text = button.querySelector('span.icon-sm');

    let isExpanded = true;

    const setText = () => {
      const num = cards.querySelectorAll('.list-card').length;
      text.textContent = isExpanded ? '▲' + num : '▼' + num;
    };
    button.addEventListener('click', () => {
      isExpanded = !isExpanded;
      setText();
      callback(isExpanded);
    }, false);

    const observer = new MutationObserver(setText);
    observer.observe(cards, {childList: true});

    setText();
    return button;
  };

  const lists = Array.from(board.querySelectorAll('#board .js-list'));
  lists.forEach(list => {
    const header = list.querySelector('.list-header');
    const cards = list.querySelector('.list-cards');
    const footer = list.querySelector('.open-card-composer');
    const button = createButton(cards, isExpanded => {
      list.style.width = isExpanded ? '' : collapsedWidth;
      cards.style.display = isExpanded ? '' : 'none';
      footer.style.display = isExpanded ? '' : 'none';
    });
    header.appendChild(button);
  });
});