diff --git a/resources/js/app/app.js b/resources/js/app/app.js
index fbb4c20d8..99aa77946 100644
--- a/resources/js/app/app.js
+++ b/resources/js/app/app.js
@@ -75,6 +75,7 @@ const _vueInstance = new Vue({
         Permissions:() => import(/* webpackChunkName: "permissions" */'app/components/permissions/permissions'),
         PaginationNavigation:() => import(/* webpackChunkName: "pagination-navigation" */'app/components/pagination-navigation/pagination-navigation'),
         ObjectsHistory:() => import(/* webpackChunkName: "objects-history" */'app/components/objects-history/objects-history'),
+        ShowHide:() => import(/* webpackChunkName: "show-hide" */'app/components/show-hide/show-hide'),
         SystemInfo:() => import(/* webpackChunkName: "system-info" */'app/components/system-info/system-info'),
         UserAccesses:() => import(/* webpackChunkName: "user-accesses" */'app/components/user-accesses/user-accesses'),
         AppIcon,
diff --git a/resources/js/app/components/show-hide/show-hide.vue b/resources/js/app/components/show-hide/show-hide.vue
new file mode 100644
index 000000000..ff6cd63b3
--- /dev/null
+++ b/resources/js/app/components/show-hide/show-hide.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="show-hide">
+        <button class="button button-outlined is-expanded" v-if="!visible" @click.prevent.stop="show">
+            <app-icon icon="carbon:add"></app-icon>
+            <span class="ml-05">{{ msgShow }}</span>
+        </button>
+        <button class="button button-outlined is-expanded" v-if="visible" @click.prevent.stop="hide">
+            <app-icon icon="carbon:subtract"></app-icon>
+            <span class="ml-05">{{ msgHide }}</span>
+        </button>
+    </div>
+</template>
+<script>
+import { t } from 'ttag';
+
+export default {
+    name: 'ShowHide',
+
+    props: {
+        field: {
+            type: String,
+            default: '',
+        },
+    },
+
+    data() {
+        return {
+            visible: false,
+            msgHide: t`Hide`,
+            msgShow: t`Show`,
+        };
+    },
+
+    mounted() {
+        this.$nextTick(() => {
+            document.getElementById(this.field).style.display = 'none';
+            this.visible = false;
+        });
+    },
+
+    methods: {
+        hide() {
+            this.visible = false;
+            document.getElementById(this.field).style.display = 'none';
+        },
+        show() {
+            this.visible = true;
+            document.getElementById(this.field).style.display = 'block';
+        },
+    },
+}
+</script>
+<style>
+div.show-hide {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+}
+</style>
diff --git a/resources/js/app/pages/admin/index.js b/resources/js/app/pages/admin/index.js
index 1f732a3eb..bb4ff61dc 100644
--- a/resources/js/app/pages/admin/index.js
+++ b/resources/js/app/pages/admin/index.js
@@ -12,6 +12,7 @@ export default {
     components: {
         PropertyView: () => import(/* webpackChunkName: "property-view" */'app/components/property-view/property-view'),
         Secret: () => import(/* webpackChunkName: "secret" */'app/components/secret/secret'),
+        ShowHide:() => import(/* webpackChunkName: "show-hide" */'app/components/show-hide/show-hide'),
     },
     data() {
         return {
diff --git a/templates/Element/Admin/index_content.twig b/templates/Element/Admin/index_content.twig
index 14a3ad6c2..aa1a3aa0c 100644
--- a/templates/Element/Admin/index_content.twig
+++ b/templates/Element/Admin/index_content.twig
@@ -44,7 +44,14 @@
                     {% for property,type in properties %}
                         {% set val = resource.attributes[property] %}
                         <div class="{{ property }}-cell" untitled-label="{{ __('Untitled') }}">
-                            {{ Admin.control(type, property, val)|raw }}
+                            {% if type == 'json' %}
+                                <show-hide field="field-{{ resource.id }}"></show-hide>
+                                <div id="field-{{ resource.id }}" class="mt-05">
+                                    {{ Admin.control(type, property, val)|raw }}
+                                </div>
+                            {% else %}
+                                {{ Admin.control(type, property, val)|raw }}
+                            {% endif %}
                         </div>
                     {% endfor %}
                     {% for property in propertiesSecrets %}