     @caretElement = @dropupButton.querySelector ".#{wzk.ui.dropup.Dropup.CSS.CARET}"
 
     # id of tag to dropup
-    dropupId = goog.dom.dataset.get @dropupButton, wzk.ui.dropup.Dropup.CSS.TARGET_ATTRIBUTE
-    unless dropupId?
+    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!"
 
-    @dropupElement = @dom.getElement dropupId
+    # find element with id or class
+    @dropupElement = @dom.one "##{dropupSelector}, .#{dropupSelector}", @dom.getDocument()
     unless @dropupElement?
-      throw new Error "Dropup element with specified id  '#{dropupId}', does not exist!"
+      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'
-
-    # store element height, so that it can be restored
-    @height = goog.style.getSize(@dropupElement).height
 
     # when animation is running, lock is set to true
     @animationLock = false

    animates dopupElement into opened position
  ###
  open: ->
    goog.style.setElementShown @dropupElement, true
    animation = @getAnimation(0, @height)

    animation.listen goog.fx.Animation.EventType.FINISH, (event) =>

    @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'
    COLLAPSE: 'collapse'

  ###
    @enum {number}
