diff --git a/scenarioo-client/app/scripts/controllers/scenario.js b/scenarioo-client/app/scripts/controllers/scenario.js
index 74d6c3d01..0101f927b 100644
--- a/scenarioo-client/app/scripts/controllers/scenario.js
+++ b/scenarioo-client/app/scripts/controllers/scenario.js
@@ -161,7 +161,6 @@ angular.module('scenarioo.controllers').controller('ScenarioCtrl', function ($sc
     // TODO make the following code generic and share it with step.js
 
     var SCENARIO_METADATA_SECTION_EXPANDED = 'scenarioo-scenarioMetadataSectionExpanded-';
-    var SCENARIO_METADATA_VISIBLE = 'scenarioo-scenarioMetadataVisible';
 
     $scope.isMetadataExpanded = function (type) {
         var metadataExpanded = localStorageService.get(SCENARIO_METADATA_SECTION_EXPANDED + type);
@@ -181,28 +180,11 @@ angular.module('scenarioo.controllers').controller('ScenarioCtrl', function ($sc
         return !$scope.isMetadataExpanded(type);
     };
 
-    $scope.toggleShowingMetadata = function() {
-        $scope.showingMetaData=!$scope.showingMetaData;
-        localStorageService.set(SCENARIO_METADATA_VISIBLE, '' + $scope.showingMetaData);
-    };
-
     /**
      * Init metadata visibility and expanded sections from local storage on startup.
      */
     function initMetadataVisibilityAndExpandedSections() {
 
-        // Init metadata visibility from local storage
-        var metadataVisible = localStorageService.get(SCENARIO_METADATA_VISIBLE);
-        if (metadataVisible === 'true') {
-            $scope.showingMetaData = true;
-        }
-        else if (metadataVisible === 'false') {
-            $scope.showingMetaData = false;
-        } else {
-            // default
-            $scope.showingMetaData = $window.innerWidth > 800;
-        }
-
         // Set special scenario metadata to expanded by default.
         var majorStepPropertiesExpanded = localStorageService.get(SCENARIO_METADATA_SECTION_EXPANDED + 'sc-scenario-properties');
         var isMajorStepPropertiesExpandedSetToFalse = majorStepPropertiesExpanded === 'false';
diff --git a/scenarioo-client/app/scripts/controllers/step.js b/scenarioo-client/app/scripts/controllers/step.js
index 9645b449c..cb523fff1 100755
--- a/scenarioo-client/app/scripts/controllers/step.js
+++ b/scenarioo-client/app/scripts/controllers/step.js
@@ -283,7 +283,6 @@ angular.module('scenarioo.controllers').controller('StepCtrl', function ($scope,
     };
 
     var STEP_METADATA_SECTION_EXPANDED = 'scenarioo-stepMetadataSectionExpanded-';
-    var STEP_METADATA_VISIBLE = 'scenarioo-stepMetadataVisible';
 
     $scope.isMetadataExpanded = function (type) {
         var metadataExpanded = localStorageService.get(STEP_METADATA_SECTION_EXPANDED + type);
@@ -303,28 +302,11 @@ angular.module('scenarioo.controllers').controller('StepCtrl', function ($scope,
         return !$scope.isMetadataExpanded(type);
     };
 
-    $scope.toggleShowingMetadata = function() {
-        $scope.showingMetaData=!$scope.showingMetaData;
-        localStorageService.set(STEP_METADATA_VISIBLE, '' + $scope.showingMetaData);
-    };
-
     /**
      * Init metadata visibility and expanded sections from local storage on startup.
      */
     function initMetadataVisibilityAndExpandedSections() {
 
-        // Init metadata visibility from local storage
-        var metadataVisible = localStorageService.get(STEP_METADATA_VISIBLE);
-        if (metadataVisible === 'true') {
-            $scope.showingMetaData = true;
-        }
-        else if (metadataVisible === 'false') {
-            $scope.showingMetaData = false;
-        } else {
-            // default
-            $scope.showingMetaData = $window.innerWidth > 800;
-        }
-
         // Set special step metadata to expanded by default.
         var majorStepPropertiesExpanded = localStorageService.get(STEP_METADATA_SECTION_EXPANDED + 'sc-step-properties');
         var isMajorStepPropertiesExpandedSetToFalse = majorStepPropertiesExpanded === 'false';
diff --git a/scenarioo-client/app/scripts/directives/showHideDetails.js b/scenarioo-client/app/scripts/directives/showHideDetails.js
index 5807d4ae0..df887b9d8 100644
--- a/scenarioo-client/app/scripts/directives/showHideDetails.js
+++ b/scenarioo-client/app/scripts/directives/showHideDetails.js
@@ -17,51 +17,65 @@
 
 'use strict';
 
-angular.module('scenarioo.directives').directive('scShowHideDetails', function(localStorageService) {
+angular.module('scenarioo.directives').directive('scShowHideDetails', function($window, localStorageService) {
 
-    var STEP_METADATA_VISIBLE = 'scenarioo-stepMetadataVisible';
+    var STEP_METADATA_VISIBLE = 'scenarioo-metadataVisible-';
     function toggleClassesOnPanels(elem, showingMetaData) {
-        console.log(showingMetaData);
         var childs = elem.children();
-        var buttonPanel = childs[0];
-        var hideButton = buttonPanel.querySelector('#sc-showHideDetailsButton-hide');
-        var showButton = buttonPanel.querySelector('#sc-showHideDetailsButton-show');
-        var panel = childs[1];
-        var panelChildren = panel.children;
+        var showHideButtonPanel = childs[0];
+        var hideButton = showHideButtonPanel.querySelector('#sc-showHideDetailsButton-hide');
+        var showButton = showHideButtonPanel.querySelector('#sc-showHideDetailsButton-show');
+        var mainAndDetailPanelRow = childs[1];
+        var panelChildren = mainAndDetailPanelRow.children;
         var mainPanel = panelChildren[0];
         var detailPanel = panelChildren[1];
         if (showingMetaData) {
             mainPanel.setAttribute('class', 'col-lg-8');
             detailPanel.setAttribute('class', 'col-lg-4 hero-unit meta-data');
-            detailPanel.style.display = "block";
-            hideButton.style.display = "block";
-            showButton.style.display = "none";
+            detailPanel.style.display = 'block';
+            hideButton.style.display = 'block';
+            showButton.style.display = 'none';
         } else {
             mainPanel.setAttribute('class', 'col-lg-12');
             detailPanel.setAttribute('class', 'hero-unit meta-data');
-            detailPanel.style.display = "none";
-            hideButton.style.display = "none";
-            showButton.style.display = "block";
+            detailPanel.style.display = 'none';
+            hideButton.style.display = 'none';
+            showButton.style.display = 'block';
         }
     }
+
+    function initMetadataVisibleFromLocalStorage(scope, key) {
+        var metadataVisible = localStorageService.get(STEP_METADATA_VISIBLE + key);
+        if (metadataVisible === 'true') {
+            scope.showingMetaData = true;
+        }
+        else if (metadataVisible === 'false') {
+            scope.showingMetaData = false;
+        } else {
+            // default
+            scope.showingMetaData = $window.innerWidth > 800;
+        }
+    }
+
     return {
         restrict: 'E',
         transclude: true,
         templateUrl: 'views/showHideDetails.html',
         link: function (scope, element, attributes ) {
-            var showingMetaData = localStorageService.get(STEP_METADATA_VISIBLE);
-            toggleClassesOnPanels(element, showingMetaData === 'true');
+            var localStorageKey = attributes.scShowhidestoragekey;
+            if(localStorageKey == undefined) {
+                localStorageKey = 'all';
+            }
+            scope.localStorageKey = localStorageKey;
+            initMetadataVisibleFromLocalStorage(scope, localStorageKey);
+            toggleClassesOnPanels(element, scope.showingMetaData);
         },
         controller: function($scope, $element) {
-
-            $scope.showingMetaData = localStorageService.get(STEP_METADATA_VISIBLE) === 'true';
             $scope.toggleShowingMetadata = function() {
                 $scope.showingMetaData = !$scope.showingMetaData;
-                localStorageService.set(STEP_METADATA_VISIBLE, '' + $scope.showingMetaData);
+                localStorageService.set(STEP_METADATA_VISIBLE + $scope.localStorageKey, '' + $scope.showingMetaData);
                 toggleClassesOnPanels($element, $scope.showingMetaData);
             };
-
-
         }
     };
 
diff --git a/scenarioo-client/app/views/scenario.html b/scenarioo-client/app/views/scenario.html
index 4f13a8603..a0352312e 100644
--- a/scenarioo-client/app/views/scenario.html
+++ b/scenarioo-client/app/views/scenario.html
@@ -34,7 +34,7 @@
     </div>
 </div>
 
-<sc-show-hide-details>
+<sc-show-hide-details sc-showHideStorageKey="scenario">
     <div>
         <!-- steps -->
         <div class="row step-view">
diff --git a/scenarioo-client/app/views/step.html b/scenarioo-client/app/views/step.html
index 4a70add03..9a176ce2b 100644
--- a/scenarioo-client/app/views/step.html
+++ b/scenarioo-client/app/views/step.html
@@ -76,7 +76,7 @@
 </div>
 
 <!-- screenshot and information -->
-<sc-show-hide-details>
+<sc-show-hide-details sc-showHideStorageKey="step">
     <div>
         <tabset class="step-panes">
             <tab heading="Screenshot">