/**
 * Renders a list of items into a dropdown, for use in situations where a native <select> isn't
 * semantically appropriate eg. to show / hide panels
 */
define(['jquery', 'MASModule'], function ($, MASModule) {
  'use strict';

  var itemSelector = '.js-dropdown-list__item',
      DropdownList,
      activeClass = 'is-active',
      uiEvents = {
        'click .js-dropdown-list__item': '_handleClickEvent'
      };

  /**
   * Dropdown list
   * @param {jQuery} $el
   * @constructor
   */
  DropdownList = function ($el) {
    this.uiEvents = uiEvents;
    DropdownList.baseConstructor.apply(this, arguments);
    this.$panel = this.$el.find('.js-dropdown-list__panel');
    this._selectItem(this.$panel.find(itemSelector).first());
    this.$el.height(this.$panel.height());
  };

  MASModule.extend(DropdownList);

  /**
   * Select a trigger
   * @param {jQuery} $el
   * @private
   */
  DropdownList.prototype._selectItem = function ($el) {
    this.$selected = $el.addClass(activeClass).attr('aria-selected', true);
    this.$panel.css('top', -1 * this.$selected.position().top);
    return this;
  };

  /**
   * Deselect a trigger
   * @param {jQuery} $el
   * @private
   */
  DropdownList.prototype._deSelectItem = function ($el) {
    $el.removeClass(activeClass).attr('aria-selected', false);
    return this;
  };

  /**
   * Show / hide and position the panel so the selected item remains stationary
   * @returns {DropdownList}
   * @private
   */
  DropdownList.prototype._togglePanel = function () {
    this.$panel.toggleClass(activeClass);
    if (this.$panel.hasClass(activeClass)) {
      this.$panel.css('top', -1 * this.$selected.position().top);
    } else {
      this.$panel.removeClass(activeClass).css('top', 0);
    }
    return this;
  };

  /**
   * Handle a click on a trigger
   * @returns {DropdownList}
   * @private
   */
  DropdownList.prototype._handleClickEvent = function (e) {
    if (!$(e.currentTarget).hasClass(activeClass)) {
      this._deSelectItem(this.$el.find(itemSelector + '.is-active'));
      this._selectItem($(e.currentTarget));
    }
    this._togglePanel();
  };

  return DropdownList;

});

@@ -327,16 +327,53 @@
 ctive',%0A
+      inactiveClass = 'is-inactive',%0A
       ui
@@ -383,16 +383,16 @@
 nts = %7B%0A
-
         
@@ -499,24 +499,57 @@
 %7BjQuery%7D $el
+ - passed to MASModule superclass
 %0A   * @const
@@ -741,16 +741,40 @@
 _panel')
+.addClass(inactiveClass)
 ;%0A    th
@@ -833,51 +833,8 @@
 ));%0A
-    this.$el.height(this.$panel.height());%0A
   %7D;
@@ -1038,32 +1038,59 @@
 ss(activeClass).
+removeClass(inactiveClass).
 attr('aria-selec
@@ -1347,32 +1347,56 @@
 ss(activeClass).
+addClass(inactiveClass).
 attr('aria-selec
@@ -1657,24 +1657,51 @@
 activeClass)
+.toggleClass(inactiveClass)
 ;%0A    if (th
@@ -1814,16 +1814,16 @@
  else %7B%0A
+
       th
@@ -1836,33 +1836,8 @@
 nel.
-removeClass(activeClass).
 css(

Add inactive class to simplify styling