xxxxxxxxxx1
<div class="accordion accordion-borderless accordion-preview" id="accordion">2
<div class="accordion-item">3
<h2 class="accordion-header mx-4" id="accordion-header">header</h2>4
</div>5
<div 6
id="collapse"7
class="accordion-collapse collapse" 8
type="button"9
10
11
>12
<div class="accordion-body position-relative py-0">13
some description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description textsome description text14
</div>15
</div>16
</div>17
18
<p class='pointer'19
data-mdb-toggle="collapse"20
data-mdb-target="#collapse">21
show more22
</p>xxxxxxxxxx1
.accordion-collapse {2
min-height: 90px !important;3
}4
5
.accordion-preview .collapse {6
display: block;7
}8
9
.accordion-preview .accordion-body {10
position: relative;11
overflow: hidden;12
}13
14
.accordion-preview .collapse:not(.show) .accordion-body {15
max-height: 90px;16
}17
18
19
.accordion-preview .collapse:not(.show) .accordion-body:after {20
transition: all 1s;21
position: absolute;22
bottom: 0;23
left: 0;24
height: 100%;25
width: 100%;26
content: "";27
background: linear-gradient(to top,28
rgba(255,255,255, 1) 5%, 29
rgba(255,255,255, 0) 60%30
);31
pointer-events: none; /* so the text is still selectable */32
} 33
34
.pointer {35
cursor:pointer;36
}1
1
Console errors: 0