JQuery: Trabalhando com slideToggle()

Saiba mais sobre o efeito slideToggle, clicando aqui.

A ideia desse post: Ao clicar no botão, os textos inseridos dentro da tag p.detalhes serão exibidos ou ocultos, aplicados ao efeito de deslizamento; o texto do botão será trocado.

<script type="application/javascript">
$(document).ready(function() {
  $("button").click(function(){
    var elem = $(this);
    $('.detalhes').slideToggle('slow', function() {
       if ($(this).is(":visible")) {
         elem.text('ocultar detalhes');                
       } else {
         elem.text('mostrar detalhes');                
       }        
    });
  });
});
</script>
<style type="text/css">
button.mais-detalhes{ 
  cursor:pointer;
}
p.detalhes{ display:none; padding: 5px; margin-top:10px; }
</style>
  <button class="mais-detalhes">mostrar detalhes</button>
  <p class="detalhes">Texto a ser mostrado e escondido ao clicar no botão.</p>

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *