diff --git a/app/assets/javascripts/behaviors/toggler_behavior.js b/app/assets/javascripts/behaviors/toggler_behavior.js
index 4c9ad128e6cd6033eabef8ea06f50fd1666827f7..77e92ff8caf9ddf4a520d33e89a8b6b968d011cb 100644
--- a/app/assets/javascripts/behaviors/toggler_behavior.js
+++ b/app/assets/javascripts/behaviors/toggler_behavior.js
@@ -22,6 +22,7 @@ $(() => {
   }
 
   $('body').on('click', '.js-toggle-button', function toggleButton(e) {
+    e.target.classList.toggle('open');
     toggleContainer($(this).closest('.js-toggle-container'));
 
     const targetTag = e.currentTarget.tagName.toLowerCase();
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 0dad91ba128f0daa0a068b7223480be40209e2eb..9e3142c8aa3f38a0bc2fc7011e1dd0bd196c41db 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -135,7 +135,7 @@
 
 .text-expander {
   display: inline-block;
-  background: $gray-light;
+  background: $white-light;
   color: $gl-text-color-secondary;
   padding: 0 5px;
   cursor: pointer;
@@ -146,6 +146,11 @@
   line-height: $gl-font-size;
   outline: none;
 
+  &.open {
+    background: $gray-light;
+    box-shadow: inset 0 0 2px rgba($black, 0.2);
+  }
+
   &:hover {
     background-color: darken($gray-light, 10%);
     text-decoration: none;
diff --git a/changelogs/unreleased/28575-expand-collapse-look.yml b/changelogs/unreleased/28575-expand-collapse-look.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d8943316300c63ece405201db6af5a86fe5bbb29
--- /dev/null
+++ b/changelogs/unreleased/28575-expand-collapse-look.yml
@@ -0,0 +1,4 @@
+---
+title: Expand/collapse button -> Change to make it look like a toggle
+merge_request: 10720
+author: Jacopo Beschi @jacopo-beschi