Abrir e fechar DIV JAVASCRIP

[GustavoDose 1]

Boa tarde finalmente consegui fazer com que funcionasse em partes agora estou com outro problema.

 

agora abre e fecha certinho mas quando abre um nao fecha o outro abrindo por cima da outra div alguem abe como resolver ?

 

segue como ficou o javascript

<script type="text/javascript">
          $(function() {
          $('.texto').hide();
          $('.descricao-sobre').click(function() {
          $('.descricao-sobre').removeClass('selecionado');
          $(this).addClass('selecionado');
                                        
          $(this).next().slideToggle('slow')
          .siblings('.texto:visible').slideToggle('fast');    
                                        
          $('.descricao-sobre').click(function(e) {
          e.stopPropagation();
           });
        });
      });
</script>
 
 
 
                <span class="descricao-sobre"></span>
                    <div class="texto">
                        <p>HSUAHSAUSHAUSHAUSHAUSHUAHSA</p>
                    </div>

[William Bruno 1501]

$(function() {

$('.texto').hide();

 

$('.descricao-sobre').click(function(e) {

e.stopPropagation();

 

$('.descricao-sobre').removeClass('selecionado');

$(this).addClass('selecionado');

 

$(this).next().slideToggle('slow')

.siblings('.texto:visible').slideToggle('fast');

});

 

 

});

Simplifiquei e indentei, mas não entendi essa parte aqui:

    $(this).next().slideToggle('slow')

.siblings('.texto:visible').slideToggle('fast');

pra quê isso ?

[GustavoDose 1]

 

William tenho 4 destes essa funcao faz com que va para o proximo, pois as divs tem a mesma classe mais conteudos diferentes

 

William tenho 4 destes essa funcao faz com que va para o proximo, pois as divs tem a mesma classe mais conteudos diferentes

 

Digo tenho 4 divs iguais com conteudos diferentes quando clicar em uma aparece seu respectivo conteudo , essa funcao faz com que va pra o proximo mostrando o respectivo conteudo. so que aparecem um por cima do outro em fez de fechar um e abrir outro

[William Bruno 1501]

Então cara.. mas esse trecho não faz sentido.

 

Pq os elementos com classe .texto não possuem irmãos. Eles são filhos diretos de .descricao-sobre, um .descricao-sobre é irmão do outro, mas .texto não é irmão de ninguém.

 

Então o siblings tá perdido ai. Fora isso, se vc tá usando a classe .selecionado para mostrar ou esconder quem está ativo, pq vc tem q abrir "o próximo" ? se o cara clicou no this, e não no próximo ?

[GustavoDose 1]

 

Entao bruno ele ativa a classe selecionado para mostrar que este esta ativo mudando o background, se eu tirar esta parte o codigo nao funciona ;/

[William Bruno 1501]

Não falei pra vc tirar.. eu tô dizendo q até essa parte o código faz sentido.

 

Dai em diante, no .next() é que tudo se perde, e não encontrei a lógica que vc tá usando.

Tem mais html na jogada ? poste 2 elementos para eu ver se dá para entender oq vc tá fazendo.

[GustavoDose 1]

Estava equivocado mesmo , nao fazia sentido aquela parte, script ficou assim:

                              <script>
                                $(function() {
                                      $('.texto').hide();
                                      $('.descricao-sobre').click(function() {                                    
                                        $('.descricao-sobre').removeClass('selecionado');
                                        $(this).addClass('selecionado');
                                        $(this).next().slideToggle('slow')
                                      });
                                    });
                              </script>

e o que eu preciso que apareca esta assim

                <div class="box">   
                    <span class="descricao-sobre"></span>
                     <div class="texto">
                        <p>HSUAHSUAHSUAHS</p>
                    </div>
                <div class="box">   
                    <span class="descricao-sobre"></span>
                    <div class="texto">
                        <p>HSUAHSUAHSUAHS</p>
                   </div>
 

quando clico em um aparece e fecha certinho , mas quando clico no segundo ele aparece por cima da outra div e :(

 

e queria saber se tem como fazer tambm para quando clicar em qualquer lugar fechar a div nao somente no span

[William Bruno 1501]

Ahh.. agora tá melhor pra te entender. Viu ?

 

Sobre fechar ao clicar em qualquer lugar, veja isso:

http://wbruno.com.br/jquery/menu-dropdown-abrindo-click-fechando-ao-clicar-fora/

 

Ai eu explico como fazer.

 

Em cima dessa linha:

$(this).next().slideToggle('slow')

coloca:

$('.texto').hide();//escondendo os outros
$(this).next().slideToggle('slow')

[GustavoDose 1]

Entao eu ja li esse seu post e tentei implementar o codigo e nao obtive sucesso, mas isso é o menor dos problemas meu problema realmente é fazer com que quando um aparecer o outro suma e nao estou conseguindo fazer ;/

[William Bruno 1501]

Em cima dessa linha:

$(this).next().slideToggle('slow')

coloca:

$('.texto').hide();//escondendo os outros

$(this).next().slideToggle('slow')

[GustavoDose 1]

Sim sim ja achei este erro Willian ja tinha testado assim, problema é que quando coloco a funcao que voce disse funciona perfeito so que quando clico novamente ele nao fecha ou seja ele fecha e abre automaticamente denovo ;/

Depois que ele fica ativo e mostra o conteudo eu nao consigo mais fechar entende ele fecha mas ja abre denovo ;/

[William Bruno 1501]

Ah, ok.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
html, body { height: 100%; }
</style>
</head>
<body>

    <div class="box">
        <span class="descricao-sobre">Desc</span>
        <div class="texto">
            <p>HSUAHSUAHSUAHS</p>
        </div><!-- .texto -->
    </div><!-- .box -->
    <div class="box">
        <span class="descricao-sobre">Desc</span>
        <div class="texto">
            <p>HSUAHSUAHSUAHS</p>
        </div><!-- .texto -->
    </div><!-- .box -->

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
jQuery(document).ready(function(){
    var $box = jQuery(".box"),
        $descricao = jQuery(".descricao-sobre"),
        $texto = jQuery(".texto");

    $texto.hide();
    $descricao.on("click", function(){
        var $this = jQuery(this);

        $this.addClass("selecionado").siblings(".descricao-sobre").removeClass("selecionado");

        $texto.not($this.next()).hide();
        $this.next().slideToggle('slow');
    });
    $box.on("click", function(e){
        e.stopPropagation();
    });
    jQuery("body").on("click", function(){
        $texto.hide();
        $descricao.removeClass("selecionado");
    });

});
</script>
</body>
</html>

a única mágica foi usar o .not()

 

ps: editei para colocar a rotina de fechar ao clicar fora.

[GustavoDose 1]

Nossa William perfeito , muito obrigado, unico defeito agora é que dps de selecionado e mudado o background ele nao remove a classe, mas tento dar um jeito nisso. Obrigado mesmo william

Willian nao consigo achar o erro para desmarcar o ativo cara, desculpa pelo incomodo mas realmente nao acho o erro

[William Bruno 1501]

não é "erro", é só um comportamento q não foi implementado.

jQuery(document).ready(function(){
    var $box = jQuery(".box"),
        $descricao = jQuery(".descricao-sobre"),
        $texto = jQuery(".texto");

    $texto.hide();
    $descricao.on("click", function(){
        var $this = jQuery(this);

        $descricao.removeClass("selecionado");

        if($this.hasClass("selecionado")) {
            $this.removeClass("selecionado");
        } else {
            $this.addClass("selecionado");
        }

        $texto.not($this.next()).hide();
        $this.next().slideToggle('slow');
    });
    $box.on("click", function(e){
        e.stopPropagation();
    });
    jQuery("body").on("click", function(){
        $texto.hide();
        $descricao.removeClass("selecionado");
    });

});

Tipo.. não procure "erros". Procure entender o código, e simular como ele funciona na sua cabeça ou em um papel. Chamam isso de "teste de mesa".

[GustavoDose 1]

Muito obrigado Willian pode deixar que irei adotar este metodo, mais uma vez obrigado mesmo