Efeito SlideToggle com Jquery
Postado: 5 de maio de 2021
Tempo de Leitura: < 1 Minuto
Efeito SlideToggle com Jquery
O método .slideToggle() anima a altura dos elementos correspondentes. Isso faz com que as partes inferiores da página deslizem para cima ou para baixo, parecendo revelar ou ocultar … Ao clicar em um elemento, a primeira função especificada dispara, ao clicar novamente, a segunda função dispara e assim por diante. Vamos adicionar o exemplo abaixo:
<div class="box-texto"> <h1 class="toogle">Clique Veja Efeito SlideToogle</h1> <div class="texto"> <p> O método .slideToggle () anima a altura dos elementos correspondentes. <br> Isso faz com que as partes inferiores da página deslizem para cima ou para baixo, parecendo revelar ou ocultar ... </p> </div> </div><!--Fecha Box Texto-->
Vamos Adicionar o Css:
.box-texto { width:100%; float:left; } .box-texto h1 { width: 100%; float: left; border-bottom: 1px #f7f7f7 solid; cursor: pointer; padding-bottom: 0.3em; text-align: center; color: #62d8dd; font-size: 2em; } .box-texto .texto { width:100%; float:left; display:none; padding:0.5em; text-align:center; } .box-texto .texto p { width:100%; float:left; margin-bottom:0.5em; color:#555555; font-size:1em; } .ativa { color:#ee2727!important; }
por final vamos adicionar o PRINCIPAL o jquery:
<script> $(document). ready (function(){ $('.toogle').click (function(){ $(".toogle") .toggleClass('ativa'); $('.texto') .slideToggle (500); }); }); </script>
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
381 Visualizações
Deixe um comentário