Exibir e Ocultar Seção no Elementor

Para funcionar, você deve criar um botão no elementor, e colocas a classe “showme”.

Abaixo segue o código que você precisa colocar no widget HTML:

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.showme').click(function(){
var buttonText = $(this).text(); // Obter o texto atual do botão
$(this).closest('.elementor-section').next().slideToggle();
$(this).toggleClass('opened');
// Alterar o texto do botão de acordo com seu estado atual
  if ($(this).hasClass('opened')) {
    $(this).text(buttonText.replace('Expandir', 'Fechar'));
    $(this).css('color', 'white');
    $(this).css('background', '#1EB317');
    $(this).css('font-size', '15px');
    $(this).css('font-family', 'Roboto');
    $(this).css('cursor', 'pointer');
    $(this).css('padding', '8px 15px 8px 15px');
    $(this).css('border-radius', '10px');// Alterar o texto para "Esconder"
  } else {
    $(this).text(buttonText.replace('Fechar', 'Expandir')); // Alterar o texto para "Mostrar"
  }
});
$('.closebutton').click(function(){
$(this).closest('.elementor-section').prev().find('.showme').click();
});
});
});
</script>
<style>
.showme a, .showme svg, .showme i , .showme img, .closebutton a, .closebutton i, .closebutton img{
cursor: pointer;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.opened i , .opened img,.opened svg{
transform: rotate(90deg);
}
</style>

Neste código também estou fazendo com que o botão mude de texto de “Expandir” para “Fechar”.