I'm testing a non-button accordion-preview method, that when triggered allows user to see the whole content of a long text.

I've been relatively successful on omiting the button for the accordion behavior, as now by clicking in the 'preview' content it works. However, the movement of it doesn't look very clean, as it seems to be operating as a button and as if there was not the 'preview'.

I'm using Django-template system to retrieve content. This is the template accordion code:

 <div class="accordion accordion-borderless accordion-preview" id="accordion_{{ forloop.counter }}">
            <div class="accordion-item">
            <h2 class="accordion-header" id="heading_{{ forloop.counter }}">
            </div>
                <div 
                id="collapse_{{ forloop.counter }}"
                class="accordion-collapse collapse" 
                type="button"
                data-mdb-toggle="collapse"
                data-mdb-target="#collapse_{{ forloop.counter }}"
                aria-expanded="false"
                aria-controls="collapse_{{ forloop.counter }}"
                aria-labelledby="heading_{{ forloop.counter }}" 
                data-mdb-parent="#accordion_{{ forloop.counter }}"
                >
                    <div class="accordion-body">
                        {{event.description|safe}}
                    </div>
                </div>
            </div>
        </div>

Here there is the custom.css snippet for it:

.accordion-preview .collapse:not(.show) {
    display: block;
}
.accordion-preview .collapse:not(.show) .accordion-body {
    max-height: 90px;
    position: relative;
    overflow: hidden;
}

.accordion-preview .collapse:not(.show) .accordion-body:after {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: "";
    background: linear-gradient(to top,
       rgba(255,255,255, 1) 5%, 
       rgba(255,255,255, 0) 60%
    );
    pointer-events: none; /* so the text is still selectable */
}

And here there is a short video of the behavior.

How could I make it go smoother? Should I override some accordion method behavior? Is using accordions the right way to achieve the result I want? Thank you very much.