diff --git a/awx/ui/client/features/output/details.directive.js b/awx/ui/client/features/output/details.directive.js
index 36a0d5c16b..4808798ffe 100644
--- a/awx/ui/client/features/output/details.directive.js
+++ b/awx/ui/client/features/output/details.directive.js
@@ -367,25 +367,49 @@ function getInstanceGroupDetails () {
 }
 
 function getJobTagDetails () {
-    const label = 'Job Tags';
-    const value = resource.model.get('job_tags');
+    const tagString = resource.model.get('job_tags');
 
-    if (!value) {
+    let jobTags;
+
+    if (tagString) {
+        jobTags = tagString.split(',');
+    } else {
+        jobTags = [];
+    }
+
+    if (jobTags.length < 1) {
         return null;
     }
 
-    return { label, value };
+    const label = 'Job Tags';
+    const more = false;
+
+    const value = jobTags.map($filter('sanitize'));
+
+    return { label, more, value };
 }
 
 function getSkipTagDetails () {
-    const label = 'Skip Tags';
-    const value = resource.model.get('skip_tags');
+    const tagString = resource.model.get('skip_tags');
 
-    if (!value) {
+    let skipTags;
+
+    if (tagString) {
+        skipTags = tagString.split(',');
+    } else {
+        skipTags = [];
+    }
+
+    if (skipTags.length < 1) {
         return null;
     }
 
-    return { label, value };
+    const label = 'Skip Tags';
+    const more = false;
+
+    const value = skipTags.map($filter('sanitize'));
+
+    return { label, more, value };
 }
 
 function getExtraVarsDetails () {
@@ -428,19 +452,41 @@ function createErrorHandler (path, action) {
 }
 
 const ELEMENT_LABELS = '#job-results-labels';
+const ELEMENT_JOB_TAGS = '#job-results-job-tags';
+const ELEMENT_SKIP_TAGS = '#job-results-skip-tags';
 const ELEMENT_PROMPT_MODAL = '#prompt-modal';
-const LABELS_SLIDE_DISTANCE = 200;
+const TAGS_SLIDE_DISTANCE = 200;
 
 function toggleLabels () {
     if (!this.labels.more) {
-        $(ELEMENT_LABELS).slideUp(LABELS_SLIDE_DISTANCE);
+        $(ELEMENT_LABELS).slideUp(TAGS_SLIDE_DISTANCE);
         this.labels.more = true;
     } else {
-        $(ELEMENT_LABELS).slideDown(LABELS_SLIDE_DISTANCE);
+        $(ELEMENT_LABELS).slideDown(TAGS_SLIDE_DISTANCE);
         this.labels.more = false;
     }
 }
 
+function toggleJobTags () {
+    if (!this.jobTags.more) {
+        $(ELEMENT_JOB_TAGS).slideUp(TAGS_SLIDE_DISTANCE);
+        this.jobTags.more = true;
+    } else {
+        $(ELEMENT_JOB_TAGS).slideDown(TAGS_SLIDE_DISTANCE);
+        this.jobTags.more = false;
+    }
+}
+
+function toggleSkipTags () {
+    if (!this.skipTags.more) {
+        $(ELEMENT_SKIP_TAGS).slideUp(TAGS_SLIDE_DISTANCE);
+        this.skipTags.more = true;
+    } else {
+        $(ELEMENT_SKIP_TAGS).slideDown(TAGS_SLIDE_DISTANCE);
+        this.skipTags.more = false;
+    }
+}
+
 function cancelJob () {
     const actionText = strings.get('cancelJob.CANCEL_JOB');
     const hdr = strings.get('cancelJob.HEADER');
@@ -562,6 +608,8 @@ function AtJobDetailsController (
         vm.cancelJob = cancelJob;
         vm.deleteJob = deleteJob;
         vm.toggleLabels = toggleLabels;
+        vm.toggleJobTags = toggleJobTags;
+        vm.toggleSkipTags = toggleSkipTags;
 
         const observe = (getter, transform, key) => {
             $scope.$watch(getter, value => { vm[key] = transform(value); });
diff --git a/awx/ui/client/features/output/details.partial.html b/awx/ui/client/features/output/details.partial.html
index 5eb4f5b146..65e35278b0 100644
--- a/awx/ui/client/features/output/details.partial.html
+++ b/awx/ui/client/features/output/details.partial.html
@@ -237,18 +237,6 @@
     </div>
 </div>
 
-<!-- TAGS DETAIL -->
-<div class="JobResults-resultRow" ng-if="vm.jobTags">
-    <label class="JobResults-resultRowLabel">{{ vm.jobTags.label }}</label>
-    <div class="JobResults-resultRowText">{{ vm.jobTags.value }}</div>
-</div>
-
-<!-- SKIP TAGS DETAIL -->
-<div class="JobResults-resultRow" ng-if="vm.skipTags">
-    <label class="JobResults-resultRowLabel">{{ vm.skipTags.label }}</label>
-    <div class="JobResults-resultRowText"> {{ vm.skipTags.value }}</div>
-</div>
-
 <!-- EXTRA VARIABLES DETAIL -->
 <at-code-mirror
     class="JobResults-resultRow"
@@ -267,14 +255,14 @@
             ng-show="vm.labels.more"
             href=""
             ng-click="vm.toggleLabels()">
-            <span translate>Labels</span>
+            <span translate>{{ vm.labels.label }}</span>
             <i class="JobResults-expandArrow fa fa-caret-right"></i>
         </a>
         <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
             ng-show="!vm.labels.more"
             href=""
             ng-click="vm.toggleLabels()">
-            <span translate>Labels</span>
+            <span translate>{{ vm.labels.label }}</span>
             <i class="JobResults-expandArrow fa fa-caret-down"></i>
         </a>
     </div>
@@ -284,3 +272,53 @@
         </div>
     </div>
 </div>
+
+<!-- TAGS DETAIL -->
+<div class="JobResults-resultRow" ng-show="vm.jobTags">
+    <div class="JobResults-resultRow">
+        <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
+            ng-show="vm.jobTags.more"
+            href=""
+            ng-click="vm.toggleJobTags()">
+            <span translate>{{ vm.jobTags.label }}</span>
+            <i class="JobResults-expandArrow fa fa-caret-right"></i>
+        </a>
+        <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
+            ng-show="!vm.jobTags.more"
+            href=""
+            ng-click="vm.toggleJobTags()">
+            <span translate>{{ vm.jobTags.label }}</span>
+            <i class="JobResults-expandArrow fa fa-caret-down"></i>
+        </a>
+    </div>
+    <div id="job-results-job-tags" class="LabelList JobResults-resultRowText JobResults-resultRowText--fullWidth">
+        <div ng-repeat="tag in vm.jobTags.value" class="LabelList-tagContainer">
+            <div class="LabelList-tag"><div class="LabelList-name">{{ tag }}</div></div>
+        </div>
+    </div>
+</div>
+
+<!-- SKIP TAGS DETAIL -->
+<div class="JobResults-resultRow" ng-show="vm.skipTags">
+    <div class="JobResults-resultRow">
+        <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
+            ng-show="vm.skipTags.more"
+            href=""
+            ng-click="vm.toggleSkipTags()">
+            <span translate>{{ vm.skipTags.label }}</span>
+            <i class="JobResults-expandArrow fa fa-caret-right"></i>
+        </a>
+        <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
+            ng-show="!vm.skipTags.more"
+            href=""
+            ng-click="vm.toggleSkipTags()">
+            <span translate>{{ vm.skipTags.label }}</span>
+            <i class="JobResults-expandArrow fa fa-caret-down"></i>
+        </a>
+    </div>
+    <div id="job-results-skip-tags" class="LabelList JobResults-resultRowText JobResults-resultRowText--fullWidth">
+        <div ng-repeat="tag in vm.skipTags.value" class="LabelList-tagContainer">
+            <div class="LabelList-tag"><div class="LabelList-name">{{ tag }}</div></div>
+        </div>
+    </div>
+</div>