fix #3192

Closes #3192

Merge request studip/studip!2478

resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss

@@ -28,14 +28,10 @@
         }
     }
 
-    .cw-collapsible-content {
-        display: none;
-        &.cw-collapsible-content-open {
-            display: block;
+    .cw-collapsible-content .cw-collapsible-content-open {
         padding: 10px;
     }
 }
-}
 
 form .cw-collapsible .cw-collapsible-content.cw-collapsible-content-open {
     padding: unset;

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;
+    .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>

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>