Instruções do efeito:
1. Você deve criar uma nova seção e adicionar dentro dessa seção dois elementos. Um deles é um botão (sem link e sem #) e o outro widget é o HTML.
2. Feito isso, você deve adicionar o script do tutorial dentro do widget de HTML, pois esse será o responsável para esconder a seção abaixo.
3. Aqui você deverá colocar o botão de ativação com o nome da classe "showme". Caso você queira criar um botão de fechar, você deve inserir um widget de botão sem link, e colocar a classe "closebutton".
4. Você deve agora colocar a seção abaixo, dentro de Avançado e Responsivo, todos os tamanhos de dispositivos como desabilitado. Só assim a seção será escondida.
Código/Script - Colar dentro de um Widget de HTML no Elementor
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.showme').click(function(){
$(this).closest('.e-container').next().slideToggle();
$(this).toggleClass('opened');
});
$('.closebutton').click(function(){
$(this).closest('.e-container').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>
