Efeito SlideToggle com Jquery

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