[Resolvido] Botão Exibir/Ocultar com JQuery

[Matheus Design 0]

Estive procurando fazer o seguinte:

Tenho duas colunas. #content e #sidebar;

A #content está visivel, e #sidebar está com display:none;

Meu interesse é criar um botão que, quando clicado ocultasse a #content

e a #sidebar aparecesse (com os efeitos SlideDown e SlideUp, respectivamente).

Quando clicado novamente, a #sidebar voltava a ficar escondida e a #content voltava

a ficar visivel (com os efeitos SlideUp e SlideDown, respectivamente).

 

Entretanto, não consegui criar um botão com esse fim, utilizando a biblioteca

JQuery para gerar os efeitos. Alguma ideia de como posso fazer isto?

Desde já, obrigado pela ajuda. =)

[Francispansa 6]

Eai Matheus, blza?

 

Cara eu não conheço muito de jQuery, mas eu faria algo como isso:

 

var j = jQuery.noConflict();
j(document).ready(function(){

   j('#botao').click(function(){
       // Verifica se o elemento #content está visivel ou não
       if (j("div#content:first").is(":visible")) {
           // Caso seja visivel, inicia o slideUp no elemento #content
           // e como retorno executa o slideDown no elemento #sidebar
           j("div#content").slideUp('300', function(){
               j("div#sidebar").slideDown();
           });
       }else{
           // Caso seja invisivel, inicia o slideUp no elemento #sidebar
           // e como retorno executa o slideDown no elemento #content
           j("div#sidebar").slideUp('300', function(){
               j("div#content").slideDown();
           });
       }

   });
});

 

Ta funcionando certinho, mas caso tenham uma forma mais correta ou limpa de fazer isso avisem.. lol

 

Espero que ajude Matheus..

 

Abrass

[Matheus Design 0]

Ah! Ajudou, sim, Francispansa!

Olhando assim para este código, penso que eu

jamais consegueria ter feito algo mais limpo.

 

Moderação, pode fechar o tópico. ;)