Alpine: Collapse & Expand Text: Toggle Text and get height

[QJan84]

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>

<div x-data="{ expanded: false }">
    <?php /* .max-h-40 { max-height: 40vh;}.max-h-9999 { max-height: 9999px;} */ ?>
    <div class="relative overflow-hidden transition-all ease-out duration-300" x-bind:class="{'max-h-9999': expanded, 'max-h-40': !expanded}">

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <button type="button" class="btn btn-link text-primary-500 absolute left-0 right-0 z-20 mx-auto bottom-0" @click="expanded = !expanded">
            <em class="ico-plus-circle pr-2"></em> <span x-text="{'Read less': expanded, 'Read more': !expanded}"></span>
        </button>
    </div>
</div>

[ryangjchandler]

I'll answer in order:

1. There is no "Alpine way" to get the height of the <div>, but you can use normal JavaScript methods such as element.offsetHeight.

2. You are defining an object inside of x-text, but you should probably use a ternary instead:

<span x-text ="expanded ? 'Read less' : 'Read more'">

[QJan84]

There is no "Alpine way" to get the height of the div, but you can use normal JavaScript methods such as element.offsetHeight.

How would that look in HTML? How can I combine alpine.js with functions?

[HugoDF]

There is no "Alpine way" to get the height of the div, but you can use normal JavaScript methods such as element.offsetHeight.

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.

[QJan84]

https://codepen.io/QJan84/pen/yLYVWvR

It works but the animation is missing. Is that because the class max-h-40 is removed?

[mblarsen]

@QJan84 I'm seeing the animation

[muzafferdede]

@QJan84 I'm seeing the animation

@mblarsen Open animation not working as expected. Yes close animation does work.

The HTMLElement.offsetHeight read-only property returns the height of an element, including vertical padding and borders, as an integer.

@QJan84 You need to get scrollHeight of the element to toggle max-height. And you need to have initial max-height. You can't switch between otherwise you will not see the animation. For the animation to happen, you need from - to states of the value.

The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.

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' : ''"
>

[HugoDF]

Seems there's a solution here, closing for now.

Feel free to reopen/create a new issue or discussion with any further questions.