diff --git a/contribs/gmf/src/layertree/common.scss b/contribs/gmf/src/layertree/common.scss
index 6676084c7388..f94c418baf32 100644
--- a/contribs/gmf/src/layertree/common.scss
+++ b/contribs/gmf/src/layertree/common.scss
@@ -162,8 +162,14 @@
     border: 0.06rem solid $main-bg-color;
     background-color: lighten($main-bg-color, 8%);
 
-    .off {
-      opacity: 0.5;
+    display: none;
+    &.show {
+      // legend is displayed
+      display: block;
+      &.off {
+        // legend is displayed but the layer is not visible
+        display: none;
+      }
     }
 
     a {
diff --git a/contribs/gmf/src/layertree/component.html b/contribs/gmf/src/layertree/component.html
index 4cbf0a457178..d41d85459191 100644
--- a/contribs/gmf/src/layertree/component.html
+++ b/contribs/gmf/src/layertree/component.html
@@ -162,7 +162,6 @@
             <i class="fa fa-th-list fa-fw"></i>
             <a
               ng-click="::gmfLayertreeCtrl.toggleNodeLegend('#gmf-layertree-node-' + layertreeCtrl.uid + '-legend'); popoverCtrl.dismissPopover()"
-              data-toggle="collapse"
               href="">
               {{'Show/hide legend'|translate}}
             </a>
@@ -222,7 +221,6 @@
   <a
     class="gmf-layertree-node-menu-togglelegend"
     ng-if="::gmfLayertreeCtrl.supportsLegend(layertreeCtrl)"
-    data-toggle="collapse"
     ng-click="::gmfLayertreeCtrl.toggleNodeLegend('#gmf-layertree-node-' + layertreeCtrl.uid + '-legend')"
     href="">
     <span
@@ -235,12 +233,11 @@
 
 <div
   ng-if="::!layertreeCtrl.isRoot && gmfLayertreeCtrl.getLegendsObject(layertreeCtrl) && layertreeCtrl.node.metadata.legend" id="gmf-layertree-node-{{::layertreeCtrl.uid}}-legend"
-  class="collapse gmf-layertree-legend"
+  class="gmf-layertree-legend"
   ng-class="[gmfLayertreeCtrl.getNodeState(layertreeCtrl), layertreeCtrl.node.metadata.isLegendExpanded ? 'show' : '']">
 
   <a
     title="{{'Hide legend'|translate}}"
-    data-toggle="collapse"
     ng-click="::gmfLayertreeCtrl.toggleNodeLegend('#gmf-layertree-node-' + layertreeCtrl.uid + '-legend')"
     href="">
     {{'Hide legend'|translate}}
diff --git a/contribs/gmf/src/layertree/component.js b/contribs/gmf/src/layertree/component.js
index e93c527bf74a..6a66ff80f401 100644
--- a/contribs/gmf/src/layertree/component.js
+++ b/contribs/gmf/src/layertree/component.js
@@ -807,9 +807,10 @@ Controller.prototype.zoomToResolution = function(treeCtrl) {
  * @param {string} legendNodeId The DOM node legend id to toggle
  */
 Controller.prototype.toggleNodeLegend = function(legendNodeId) {
-  $(legendNodeId).toggle({
-    toggle: true
-  });
+  const div = document.querySelector(legendNodeId);
+  if (div) {
+    div.classList.toggle('show');
+  }
 };
 
 
diff --git a/contribs/gmf/src/layertree/desktop.scss b/contribs/gmf/src/layertree/desktop.scss
index b14221172f20..46064557de06 100644
--- a/contribs/gmf/src/layertree/desktop.scss
+++ b/contribs/gmf/src/layertree/desktop.scss
@@ -62,10 +62,16 @@ gmf-layertree {
     padding: $half-app-margin;
   }
 
-  .gmf-layertree-group:hover,
-  .gmf-layertree-leaf:hover {
-    .gmf-layertree-right-buttons {
-      display: block;
+  .gmf-layertree-group, .gmf-layertree-leaf {
+    &:hover {
+      .gmf-layertree-right-buttons {
+        display: block;
+      }
+    }
+    &.off {
+      .extra-actions {
+        display: none;
+      }
     }
   }
 
diff --git a/contribs/gmf/src/search/component.js b/contribs/gmf/src/search/component.js
index 270ebb5552e5..21fa96a8904e 100644
--- a/contribs/gmf/src/search/component.js
+++ b/contribs/gmf/src/search/component.js
@@ -696,10 +696,10 @@ class SearchController {
    */
   filterAction_(action) {
     return (
-    /**
-         * @param {import("geojson").Feature} feature
-         * @return {boolean}
-         */
+      /**
+       * @param {import("geojson").Feature} feature
+       * @return {boolean}
+       */
       function(feature) {
         const properties = feature.properties || {};
         if (properties.actions) {