diff --git a/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss b/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss
index 79dc2eedc0d6b99e7512efb48e1b678dfb0d7464..16e4195763a4fbbe9b481f7489c923cf50febc6d 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss
@@ -28,12 +28,8 @@
         }
     }
 
-    .cw-collapsible-content {
-        display: none;
-        &.cw-collapsible-content-open {
-            display: block;
-            padding: 10px;
-        }
+    .cw-collapsible-content .cw-collapsible-content-open {
+        padding: 10px;
     }
 }
 
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss b/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss
index aa12b5e929f46ba6804e1f8dea71e1a1af7bc56a..cf28364678c8806436cc29d6ad111a2f803c1368 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss
@@ -101,14 +101,7 @@
 }
 
 .cw-tabs {
-    .cw-tab {
-        display: none;
-        height: 0;
-
-        &.cw-tab-active {
-            display: block;
-            height: unset;
-            padding: 4px 8px;
-        }
+    .cw-tab .cw-tab-active {
+        padding: 4px 8px;
     }
 }
diff --git a/resources/vue/components/courseware/layouts/CoursewareCollapsibleBox.vue b/resources/vue/components/courseware/layouts/CoursewareCollapsibleBox.vue
index 7415478383d85682fd5300a9116491ff36c28a02..eefc0fb5d0e289641543b17cf5a1619155507951 100644
--- a/resources/vue/components/courseware/layouts/CoursewareCollapsibleBox.vue
+++ b/resources/vue/components/courseware/layouts/CoursewareCollapsibleBox.vue
@@ -5,7 +5,7 @@
                 <studip-icon v-if="icon" :shape="icon" /> {{ title }}
             </header>
         </a>
-        <div class="cw-collapsible-content" :class="{ 'cw-collapsible-content-open': isOpen }">
+        <div v-if="isOpen" class="cw-collapsible-content" :class="{ 'cw-collapsible-content-open': isOpen }">
             <slot></slot>
         </div>
     </div>
@@ -54,4 +54,4 @@ export default {
         }
     }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/vue/components/courseware/layouts/CoursewareTab.vue b/resources/vue/components/courseware/layouts/CoursewareTab.vue
index 8d2e9bd39c13f18116025839eb0cb028dac57a1a..ae007074872456d532c2f0443b825135a7bbf425 100644
--- a/resources/vue/components/courseware/layouts/CoursewareTab.vue
+++ b/resources/vue/components/courseware/layouts/CoursewareTab.vue
@@ -1,9 +1,9 @@
 <template>
     <div
+        v-if="isActive"
         role="tabpanel"
         class="cw-tab"
         :id="id"
-        :class="{ 'cw-tab-active': isActive }"
         :aria-labelledby="selectorId"
     >
         <slot></slot>
@@ -48,4 +48,4 @@ export default {
         }
     }
 };
-</script>
\ No newline at end of file
+</script>