Abrir div e fechar outra automaticamente

[GustavoDose 1]

Boa tarde galera, estou em um projeto e estou com um problema.

 

 

Tenho no total 6 divs e todas elas vao abrir outra na parte inferior ate ai tranquilo clico na div e ela abre na parte inferior. Meu problema é que eu preciso que quando clicar em outra para abrir essa div a que estava aberta feche. Outro problema é que é um site com apenas uma pagina e ao clicar no menu teria que percorrer o site e abrir a div que esta escondida. Lembrando que os dois não trabalham juntos então ou funciona o que percorre o site e abre a div ou com o clique ;/

 

 

 

segue o codigo.

<script>
    $('.bloco-2').hide()
    $('.bloco').click(function() {
            $(this).toggleClass('bloco-selecionado');
        var box = $(this).attr("id");
            $this = jQuery(this);
        $('.' + box).slideToggle('fast');
        return false;
});
    $("body").on("click", function(){
    $('.bloco-2').slideUp('fast');
    $('.bloco').removeClass('bloco-selecionado');
});
</script>

Codigo para percorrer o site e abrir a div:

<script>
$('#ancora').click(function() {
    $('html, body').animate({
        scrollTop: $("#vemaqui").offset().top
    }, 100);
    $('.inferior').slideToggle('slow');
});
</script>

Alguem pode dar uma ajuda? :)

[William Bruno 1501]

$("body").on("click", function(){

?

 

não cara.. isso vai te impedir de fazer os outros cliques..

 

como é o seu html ?

[GustavoDose 1]

Meu html esta um pouco confuso pois sã0 3 divs na parte de cima que ao clicar tem que abrir embaixo destas. $("body").on("click", function() ja retirei do codigo :)

<div class="bloco toggle" id="institucional">
    <div class="conteudo-bloco">
<p>Lorem ipsum</p>
<a class="icon" href="#"></a>
</div>
</div>

Esta é a div que sera aberta

<div class="bloco-2 institucional">
               <p>teste</p>
                <div id="vemaqui"></div>
</div>

[victorqueiroz 34]

crie outras páginas e faça a listagem com o php, vc vai evitar muita dor de cabeça!

[GustavoDose 1]

Não acho necessário fazer isso, pois ate então é simples fazer com que isso seja possivel ;/

[Marlon Pacheco 132]

Cara, consegue postar teu código no Codepen ??

[GustavoDose 1]

nao sei pq nao funcionou o script ai mas ta ai.

 

 

http://goo.gl/hWdGQj

 

 

Ainda nao consegui resolver, alguem sabe oque estou fazendo errado ou tem alguma dica?

 

 

galera meu codigo esta assim.

   $('.bloco-2').hide()    $('.bloco').click(function() {            $(this).toggleClass('bloco-selecionado');        var box = $(this).attr("id");            $this = jQuery(this);        $('.' + box).slideToggle('fast');        return false;});

queria que ao clicar em outro .bloco o .bloco-2 fecha e abre outro bloco-2 da respectiva div. Alguem sabe como fazer isso?

[William Bruno 1501]

Sim, sabemos mas seria interessante conhecermos o seu html para lhe dar uma solução boa.

isso aqui: $('.' + box).slideToggle('fast'); é bem feio.

 

O que vc quer, é o mesmo princípio de um menu em abas

http://wbruno.com.br/javascript-puro/principio-de-menu-em-abas/

 

A forma mais simples de "fechar o outro", é: fechar todos.

Quando clicar para abrir alguém, vc fecha todo mundo e depois abre o que foi solicitado.

[GustavoDose 1]

Segue o html

HTML:
<div class="bloco" id="institucional">
      <div class="conteudo-bloco">
              <h2>Iteste</h2>   
       </div>
 </div>

<div class="bloco-2 institucional">
            <div class="texto">
                <h2>Iteste</h2>
                </div>
   </div>

[GustavoDose 1]

Seguinte, não sei se é a forma correta de fazer ou nao, mas fiz dessa forma e funcionou, se alguem tiver uma opinião por favor, ajuda ai :)

$(document).ready(function() {
        $('.teste').click(function() {
            var box = $(this).attr("id");
            var temClasse = $('.' + box).hasClass("ativa");
            
            $('.teste-2').removeClass('ativa');
            if(temClasse){
                $('.' + box).removeClass('ativa');
            } else {
                $('.' + box).addClass('ativa');
            }
            return false;
        });
    });

Sim, sabemos mas seria interessante conhecermos o seu html para lhe dar uma solução boa.
isso aqui: $('.' + box).slideToggle('fast'); é bem feio.

O que você quer, é o mesmo princípio de um menu em abas
http://wbruno.com.br/javascript-puro/principio-de-menu-em-abas/

A forma mais simples de "fechar o outro", é: fechar todos.
Quando clicar para abrir alguém, você fecha todo mundo e depois abre o que foi solicitado.

 

Wiliiam fiz desta forma, sei que não é a mais correta, mas funcionou, poderia dar uma dica da forma correta?

Obrigado pela ajuda.

$(document).ready(function() {
        $('.teste').click(function() {
            var box = $(this).attr("id");
            var temClasse = $('.' + box).hasClass("ativa");
           
            $('.teste-2').removeClass('ativa');
            if(temClasse){
                $('.' + box).removeClass('ativa');
            } else {
                $('.' + box).addClass('ativa');
            }
            return false;
        });
    });