fix #3192

Closes #3192

Merge request studip/studip!2478

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;
     }
 }
 

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;
     }
 }

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>

resources/vue/components/courseware/layouts/CoursewareTab.vue

 <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>