diff --git a/app/coffee/modules/common/custom-field-values.coffee b/app/coffee/modules/common/custom-field-values.coffee
index ad3e8049..b9808cbb 100644
--- a/app/coffee/modules/common/custom-field-values.coffee
+++ b/app/coffee/modules/common/custom-field-values.coffee
@@ -112,31 +112,23 @@ CustomAttributesValuesDirective = ($templates, $storage) ->
     link = ($scope, $el, $attrs, $ctrls) ->
         $ctrl = $ctrls[0]
         $model = $ctrls[1]
+        hash = collapsedHash($attrs.type)
+        $scope.collapsed = $storage.get(hash) or false
 
         bindOnce $scope, $attrs.ngModel, (value) ->
             $ctrl.initialize($attrs.type, value.id)
             $ctrl.loadCustomAttributesValues()
 
-        $el.on "click", ".custom-fields-header .collapse", ->
-            hash = collapsedHash($attrs.type)
-            collapsed = not($storage.get(hash) or false)
-            $storage.set(hash, collapsed)
-            if collapsed
-                $el.find(".custom-fields-header .icon").removeClass("open")
-                $el.find(".custom-fields-body").removeClass("open")
-            else
-                $el.find(".custom-fields-header .icon").addClass("open")
-                $el.find(".custom-fields-body").addClass("open")
+        $scope.toggleCollapse = () ->
+            $scope.collapsed = !$scope.collapsed
+            $storage.set(hash, $scope.collapsed)
 
         $scope.$on "$destroy", ->
             $el.off()
 
     templateFn = ($el, $attrs) ->
-        collapsed = $storage.get(collapsedHash($attrs.type)) or false
-
         return template({
             requiredEditionPerm: $attrs.requiredEditionPerm
-            collapsed: collapsed
         })
 
     return {
diff --git a/app/partials/custom-attributes/custom-attributes-values.jade b/app/partials/custom-attributes/custom-attributes-values.jade
index e2dbdcd3..2a5ec5eb 100644
--- a/app/partials/custom-attributes/custom-attributes-values.jade
+++ b/app/partials/custom-attributes/custom-attributes-values.jade
@@ -1,8 +1,17 @@
 section.duty-custom-fields(ng-show="ctrl.customAttributes.length")
-    div.custom-fields-header
+    .custom-fields-header
         span(translate="COMMON.CUSTOM_ATTRIBUTES.CUSTOM_FIELDS")
-        // Remove .open class on click on this button in both .icon and .custom-fields-body to close
-        a.collapse(href="", class!="<% if (!collapsed) { %>open<% } %>")
+        a.collapse(
+            href=""
+            ng-class="{'open': !collapsed}"
+            ng-click="toggleCollapse()"
+        )
             tg-svg(svg-icon="icon-arrow-down")
-    div.custom-fields-body(class!="<% if (!collapsed) { %>open<% } %>")
-        div(ng-repeat="att in ctrl.customAttributes", tg-custom-attribute-value="ctrl.getAttributeValue(att)", required-edition-perm!="<%- requiredEditionPerm %>")
+    .custom-fields-body(
+        ng-show="!collapsed"
+    )
+        .custom-attribute(
+            ng-repeat="attr in ctrl.customAttributes"
+            tg-custom-attribute-value="ctrl.getAttributeValue(attr)"
+            required-edition-perm!="<%- requiredEditionPerm %>"
+        )
diff --git a/app/styles/modules/common/custom-fields.scss b/app/styles/modules/common/custom-fields.scss
index 8c840263..d2aed368 100644
--- a/app/styles/modules/common/custom-fields.scss
+++ b/app/styles/modules/common/custom-fields.scss
@@ -13,10 +13,12 @@
         }
         .collapse {
             display: block;
+            transform: rotate(-90deg);
+            transition: .1s ease-out;
+        }
+        .open {
+            transform: rotate(0);
         }
-    }
-    .custom-fields-body {
-        @include slide(1000px, hidden, $min: 0);
     }
     .custom-field-single {
         border-bottom: 1px solid $whitish;