Unfold Script para Elementor.js

/* CSS 

Em uma seção/container nomei a class css para = box-content
Dentro dela coloque um outro container ou componente de texto com a class = unfold-content
Dentro dessa mesma área coloque um botão com a class = unfold-btn

*/


/*
Em um componente html na página ou no elementor custom code coloque o Script abaixo
e mande executar no body end;
*/

<style>
.unfold-content {
    max-height: 100px; /* Altura inicial */
    overflow: hidden; /* Esconde o overflow inicialmente */
    transition: max-height 0.5s ease-out; /* Efeito suave de transição */
}
</style>


<script>

jQuery(document).ready(function() {
	
	var minHeightSetting = 100; // Defina a altura mínima desejada aqui
	var maxHeightSetting = 300; // Defina a altura máxima desejada aqui
   

    jQuery('.unfold-btn').on('click', function() {
        var content = jQuery(this).closest('.box-content').find('.unfold-content');
        var buttonText = jQuery(this).find('.elementor-button-text');
        var isExpanded = content.hasClass('expanded');
        var fullHeight = content.prop('scrollHeight') + 'px';

        // Alterna o texto do botão
        buttonText.text(isExpanded ? 'Ver Mais' : 'Ver Menos');

        // Alterna a altura máxima
        if (isExpanded) {
            // Aplica a altura mínima
            content.css({'max-height': minHeightSetting + 'px', 'overflow': 'hidden'}).removeClass('expanded');
        } else {
            // Determina se usa a altura completa ou a máxima configurada
            var maxHeight = content.prop('scrollHeight') <= maxHeightSetting ? fullHeight : maxHeightSetting + 'px';
            content.css({'max-height': maxHeight, 'overflow': 'auto'}).addClass('expanded');
        }
    });
});


</script>