_config.inc

<!-- Custom CSS/JavaScript -->
<script type="text/javascript" src="<?= PERCH_LOGINPATH ?>/plugins/ui/usability.js"></script>

usability.js

(function($) {
  $(function() {
    var items = $('.items .edititem');
    if (items.length > 1) { updateHeaders(items); }
    if (items.length > 4) { makeCollapseable(items); }
  });
  function makeCollapseable(items) {
    items.each(function() {
      $(this).find('.field').wrapAll($('<div class="fields-wrapper"></div>'));
    })
    var togglers = items.find('h2'),
        bodies = items.find('.fields-wrapper');
    togglers.addClass('fields-toggler').each(function(i) {
      var toggler = $(this),
          body = $(bodies[i]),
          isEmpty = $(body.find('input')[0]).val() === '';
      if (body.find('.error').length) {
        toggler.addClass('error');
        body.slideDown();
        $('#template-help').append('<p class="kinshopError">Error in ' + toggler.text() + '</p>');
      }
      if (!isEmpty) {
        body.slideUp();
      }
      toggler.css('cursor', 'pointer').click(function() { body.slideToggle() });
    });
  }
  function updateHeaders(items) {
    $('body').addClass('multi-edit');
    items.each(function(i) {
      var item = $(this),
          v = $(item.find('input')[0]).val(),
          id = item.find('div.h2').attr('id');
      if (v.length > 0) {
        item.find('h2').text(v);
        $('a[href$=' + id + ']').text(v);
      }
    });
  }
})(jQuery);