 
     animation.listen goog.fx.Animation.EventType.FINISH, (event) =>
       goog.style.setElementShown @dropupElement, false
+      goog.dom.classes.add @dropupElement, wzk.ui.dropup.Dropup.CSS.COLLAPSE
       @swapClasses()
 
     animation.play()

    @enum {string}
  ###
  @CSS:
    BUTTON_TAG: 'li',
    BUTTON_CLASS: 'dropup-button',
    TARGET_ATTRIBUTE: 'target',
    CARET: 'caret-marker', # do not set to 'caret', as it is would add another arrow
    ARROW_UP: 'fa-angle-up',
    ARROW_LEFT: 'fa-angle-left'

  ###
    @enum {number}

    @caretElement = @dropupButton.querySelector ".#{wzk.ui.dropup.Dropup.CSS.CARET}"

    # id of tag to dropup
    dropupSelector = goog.dom.dataset.get @dropupButton, wzk.ui.dropup.Dropup.CSS.TARGET_ATTRIBUTE
    unless dropupSelector?
      throw new Error "Dropup button element has no '#{wzk.ui.dropup.Dropup.CSS.TARGET_ATTRIBUTE}' attribute!"

    # find element with id or class
    @dropupElement = @dom.one "##{dropupSelector}, .#{dropupSelector}", @dom.getDocument()
    unless @dropupElement?
      throw new Error "Dropup element with specified id or class  '#{dropupSelector}', does not exist!"

    # hide dropupElement right after registering
    goog.style.setElementShown @dropupElement, false

    # set overflow property
    @dropupElement.style.overflow = 'hidden'

    # when animation is running, lock is set to true
    @animationLock = false
