Topic: No-button accordion smoothness
scimitar01 pro premium asked 2 years ago
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.
mlazaru staff answered 2 years ago
Set min-height
for the .accordion-collapse
. You'll probably need to change shadow from .accordion-body:after
to something else, because it ruins the animation.
https://mdbootstrap.com/snippets/standard/mlazaru/4526078#css-tab-view
scimitar01 pro premium commented 2 years ago
Thank you for your answer, it seems to work good! Also, I would like to ask if I wanted the accordion to show and collapse by clicking, for example an icon or a 'Show more' text instead of the whole text, what would be the way for it? Thank you again.
mlazaru staff commented 2 years ago
It seems that paragraph
with appropriate data atributes will do the job, but we recommend to use buttons. This is the way how it was designed and tested. If you want to try different options, check this snippet:
https://mdbootstrap.com/snippets/standard/mlazaru/4529864
Those data atributes are crucial to control the collapse:
data-mdb-toggle="collapse"
data-mdb-target="#collapse"
scimitar01 pro premium commented 2 years ago
Got it, thank you for your help!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 5.0.0
- Device: MacBook
- Browser: Chrome
- OS: macOS Monterey 15
- Provided sample code: No
- Provided link: Yes