diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss index dd4a876f97f4122401bd36664146e6a38bd24763..6228e4705f30b179aa96c0723725acd719b091b7 100644 --- a/resources/assets/stylesheets/scss/courseware.scss +++ b/resources/assets/stylesheets/scss/courseware.scss @@ -1531,13 +1531,10 @@ c o l l a p s i b l e b o x } } - .cw-collapsible-content { - display: none; - &.cw-collapsible-content-open { - display: block; - padding: 10px; - } + .cw-collapsible-content .cw-collapsible-content-open { + padding: 10px; } + } form .cw-collapsible .cw-collapsible-content.cw-collapsible-content-open { @@ -1794,15 +1791,8 @@ $icons: ( } .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; } &.cw-course-manager-tabs { .cw-tab { diff --git a/resources/vue/components/courseware/CoursewareCollapsibleBox.vue b/resources/vue/components/courseware/CoursewareCollapsibleBox.vue index c4f9233140cee087c64d2a2d4b3dd956406d9b28..03ef9b3e2207b404758d9f47dfa8c83de8d1166c 100644 --- a/resources/vue/components/courseware/CoursewareCollapsibleBox.vue +++ b/resources/vue/components/courseware/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> diff --git a/resources/vue/components/courseware/CoursewareTab.vue b/resources/vue/components/courseware/CoursewareTab.vue index 191f552f9d922e25455f838d1222aa93a7a62943..ae007074872456d532c2f0443b825135a7bbf425 100644 --- a/resources/vue/components/courseware/CoursewareTab.vue +++ b/resources/vue/components/courseware/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>