--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importoverview/AdditionalDetail.vue	Tue Mar 12 11:14:56 2019 +0100
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h1>AdditionalDetail</h1>
+  </div>
+</template>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+
+export default {
+  name: "additionaldetail",
+  props: ["entry"]
+};
+</script>
+
+<style></style>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importoverview/AdditionalLog.vue	Tue Mar 12 11:14:56 2019 +0100
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>Additional Logs</h1>
+  </div>
+</template>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+export default {
+  name: "additionallogs",
+  props: ["entry"]
+};
+</script>
+
+<style></style>

--- a/client/src/components/importoverview/LogDetail.vue	Tue Mar 12 10:42:27 2019 +0100
+++ b/client/src/components/importoverview/LogDetail.vue	Tue Mar 12 11:14:56 2019 +0100
@@ -1,6 +1,48 @@
 <template>
   <div>
-    <h1>logdetail</h1>
+    <div class="d-flex fex-row">
+      <font-awesome-icon
+        v-if="entry.id === showAdditional"
+        @click="toggleAdditionalInfo"
+        class="my-auto mr-1 text-info pointer"
+        icon="angle-down"
+        fixed-width
+      ></font-awesome-icon>
+      <font-awesome-icon
+        v-if="entry.id !== showAdditional"
+        @click="toggleAdditionalInfo"
+        class="my-auto mr-1 text-info pointer"
+        icon="angle-right"
+        fixed-width
+      ></font-awesome-icon>
+      <span class="text-info"><translate>Additional Info</translate></span>
+    </div>
+    <AdditionalDetail
+      v-if="entry.id === showAdditional"
+      class="ml-2 d-flex flex-row"
+    ></AdditionalDetail>
+    <div class="d-flex fex-row">
+      <font-awesome-icon
+        v-if="entry.id === showLogs"
+        @click="toggleAdditionalLogging"
+        class="my-auto mr-1 text-info pointer"
+        icon="angle-down"
+        fixed-width
+      ></font-awesome-icon>
+      <font-awesome-icon
+        v-if="entry.id !== showLogs"
+        @click="toggleAdditionalLogging"
+        class="my-auto mr-1 text-info pointer"
+        icon="angle-right"
+        fixed-width
+      ></font-awesome-icon>
+      <span class="text-info"><translate>Additional Logs</translate></span>
+    </div>
+
+    <AdditionalLog
+      v-if="entry.id === showLogs"
+      class="ml-2 d-flex flex-row"
+    ></AdditionalLog>
   </div>
 </template>
 
@@ -18,10 +60,36 @@
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
  */
+
+import { mapState } from "vuex";
+
 export default {
   name: "logdetail",
-  props: ["entry"]
+  props: ["entry"],
+  components: {
+    AdditionalDetail: () => import("./AdditionalDetail.vue"),
+    AdditionalLog: () => import("./AdditionalLog.vue")
+  },
+  methods: {
+    toggleAdditionalInfo() {
+      if (this.entry.id === this.showAdditional) {
+        this.$store.commit("imports/hideAdditionalInfo");
+      } else {
+        this.$store.commit("imports/showAdditionalInfoFor", this.entry.id);
+      }
+    },
+    toggleAdditionalLogging() {
+      if (this.entry.id === this.showLogs) {
+        this.$store.commit("imports/hideAdditionalLogs");
+      } else {
+        this.$store.commit("imports/showAdditionalLogsFor", this.entry.id);
+      }
+    }
+  },
+  computed: {
+    ...mapState("imports", ["showAdditional", "showLogs"])
+  }
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped></style>

--- a/client/src/components/importoverview/LogEntry.vue	Tue Mar 12 10:42:27 2019 +0100
+++ b/client/src/components/importoverview/LogEntry.vue	Tue Mar 12 11:14:56 2019 +0100
@@ -64,7 +64,7 @@
         </div>
       </div>
     </div>
-    <div class="d-flex flex-row">
+    <div class="ml-1 d-flex flex-row">
       <LogDetail entry="entry" v-if="show === entry.id"></LogDetail>
     </div>
   </div>

--- a/client/src/store/imports.js	Tue Mar 12 10:42:27 2019 +0100
+++ b/client/src/store/imports.js	Tue Mar 12 11:14:56 2019 +0100
@@ -129,6 +129,18 @@
     hideDetails: state => {
       state.show = NODETAILS;
     },
+    showAdditionalInfoFor: (state, id) => {
+      state.showAdditional = id;
+    },
+    hideAdditionalInfo: state => {
+      state.showAdditional = NODETAILS;
+    },
+    showAdditionalLogsFor: (state, id) => {
+      state.showLogs = id;
+    },
+    hideAdditionalLogs: state => {
+      state.showLogs = NODETAILS;
+    },
     setImportToReview: (state, id) => {
       if (!isNaN(parseFloat(id)) && isFinite(id)) {
         state.importToReview = id;