-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Collapse & Expand Text: Toggle Text and get height #406
Comments
I'll answer in order:
|
How would that look in HTML? How can I combine alpine.js with functions? |
<div x-bind:class="{'max-h-9999': expanded, 'max-h-40': !expanded}"> would become <div x-ref="container" x-bind:style="expanded ? 'max-height: ' + $refs.container.offsetHeight + 'px' : ''" x-bind:class="{'max-h-40': !expanded}"> Note I haven't tested the above but it should give you an idea of the approach, if you share in a codepen I'm happy to have a closer look. |
https://codepen.io/QJan84/pen/yLYVWvR It works but the animation is missing. Is that because the class max-h-40 is removed? |
@QJan84 I'm seeing the animation |
@mblarsen Open animation not working as expected. Yes close animation does work.
@QJan84 You need to get
Try this <div class="relative overflow-hidden transition-all max-h-40 ease-in duration-1000"
x-ref="container"
x-bind:style="expanded ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''"
> |
Seems there's a solution here, closing for now. Feel free to reopen/create a new issue or discussion with any further questions. |
Hi when the dropshow is true the height change to 0px ,but when i click the button it will show the height number,I think it may be a problem with the format, but I have modified it several times without success. |
It works but there are two problems:
1.) How can I get the height of div with alpine.js?
max-height: 9999px
is not optimal.2.) Depending on whether the entire text is visible or not, the text should adapt. This does not work with
<span x-text =" {'Read less': expanded, 'Read more':! Expanded} "> </span>
The text was updated successfully, but these errors were encountered: