         }
       )
 
+  toggleBox: ->
+    $('.validation-errors-body').slideToggle();
+    $('.validation-errors-header').toggleClass('border-btm');
+    $('.toggle-errors').find('i').toggleClass('fa-angle-up')
+    $('.toggle-errors').find('i').toggleClass('fa-angle-down')
 
 

    @state = {
      data: @props.validationErrors
    }

  render: ->
    div(
      { className: 'validation-errors-box' }
      @renderHeader()
      @renderInfoBox()
      @renderValidationErrors()
    )

  renderHeader: ->

        "Validation errors (#{@state.data.length})"
      )
      a(
        {
          className: 'toggle-errors button'
          onClick: @toggleBox
        }
        i({ className: 'fa fa-angle-up' })
      )
    )

  renderBody: ->
    div(
      { className: 'validation-errors-body' }
      @renderInfoBox()
      @renderValidationErrors()
    )

  renderInfoBox: ->
