Bookmarklet: Make columns collapsible on a Jira Agile Board

README.md

It would be nice if you could just drag a link to your toolbar, but GitHub sanitizes javascript: links in Markdown (which is a good thing, really). Therefore you'll have to do this manually. Create a bookmark with the following URL content:

javascript:(function()%7Bvar%20s%3Ddocument.createElement('script')%3Bs.src%3D'https%3A%2F%2Fgist.githack.com%2Flackac%2F03c6d1921bde0b97e050%2Fraw%2Fcollapsible_jira_board.js'%3Bdocument.getElementsByTagName('script')%5B0%5D.parentNode.appendChild(s)%7D)()

collapsible_jira_board.js

$("<style> .collapsed { width: 20px; } .collapsed > div, .collapsed > h2 { display: none !important; } </style>").appendTo("head");

function toggleColumn(id) {
  var selector = '.ghx-column[data-id="'+id+'"], .ghx-column[data-column-id="'+id+'"]';
  return $(selector).toggleClass('collapsed').hasClass('collapsed');
}

function collapseLinkClicked(e) {
  e.preventDefault();
  var id = $(this).closest('.ghx-column').data('id');
  if (toggleColumn(id)) {
    $(this).text('►');
  } else {
    $(this).text('▼');
  }
}

$('.ghx-column[data-id]').each(function() {
  var columnHeader = $(this),
      title = columnHeader.find('h2').text();
      collapseLink = $('<a>', {
        href: '#',
        text: '▼',
        title: title,
        click: collapseLinkClicked,
        css: {
          'margin-right': '0.5em',
          'text-decoration': 'none'
        }
      });
  columnHeader.prepend(collapseLink);
});