[Resolvido] Show e Hide com toggle

[Nícolas Luís Huber 14]

Irei resumir meu problema em uma única imagem:

 

http://img37.imageshack.us/img37/2790/imgpn.png

 

Como dá para notar, quando aquele link, que contem um seta para cima, for clicado ele vai esconder o conteúdo que fica na box branca e irá trocar a imagem, para uma com a seta para baixo.

 

Ou seja, clicou -> hide box, muda img... clicou novamente -> show box, muda img...

 

Mas eu quero fazer isto com toggle, será que é possível???

 

Segue como esta meu código

 

<script>    
$(document).ready(function() {
 $(".hide-wrapper").click(		
   function() {
     $(".box").toggle();
   });
});
</script>

 

Moderador: Por favor, mova o tópico para área correta.

[William Bruno 1501]

não é cara, pq você vai precisar identificar qndo está aberto e qnto está fechado.

 

então o if q o toggle economizou, você vai ter q fazer de qq jeito. Ai não compensa usar o toggle

[Nícolas Luís Huber 14]

não é cara, pq você vai precisar identificar qndo está aberto e qnto está fechado.

 

então o if q o toggle economizou, você vai ter q fazer de qq jeito. Ai não compensa usar o toggle

 

Obrigado William, sou novato no JavaScript, como posso fazer um condição if para verificar se está aberto?

[William Bruno 1501]

if( $(".box").is(':visible') ){

[Nícolas Luís Huber 14]

Obrigado novamente William, agora estou com outro problema. Como estou usando uma mesma class várias vezes, então quando eu clico em um, obviamente fecha todo. Existe como eu passar um paramêtro na function para fechar apenas aquele. eu não quero ficar criando muito código para fechar Id por id, quero algo simples e dinâmico. Tem como?

 

Muito obrigado desde já! Esse fórum é muito bom!

[William Bruno 1501]

estude sobre o objeto this

 

http://wbruno.com.br/2011/06/21/afinal-e-javascript/

[Nícolas Luís Huber 14]

Obrigado William Bruno.

 

Só que o this acho que não vai funcionar, ou pelo menos não achei um lógica para ele funcionar com sintaxe de jQuery que conheço. Meu código está assim:

 

<script>
$(document).ready(function() {
 $(".hide-wrapper").click(		
   function() {
     if( $(".box").is(':visible')){
       $(this).hide();
     }else{
       $(this).show();
     }
  });
});
</script>

 

Como o código diz, ele vai fechar apenas o .hidewrapper, pois foi pego pelo this. Mas eu quero fechar o .box, como posso fazer?

[William Bruno 1501]

vamos lá.. como é o seu html ?

 

além do this, você tem q usar o .parent, .next.. enfim.. ir navegando pelo DOM.

 

o this ai, é o proprio botão q recebeu o click, entendeu ? ai apartir dele, q você acha o outro.

[Nícolas Luís Huber 14]

O meu HTML é o seguinte:

 

<article class="wrapper wrapper-small right">

       <header class="wrapper-title">

<i class="icon-globe"></i> Cotações <a href="#" rel="tooltip" data-placement="bottom" data-original-title="Esconder" class="hide-wrapper"><i class="icon-chevron-up"></i></a>

</header>

       <article class="box">
         Conteúdo Box
       </article>

     </article><!-- Wrapper -->

[William Bruno 1501]

<script>
$(document).ready(function() {


 $(".hide-wrapper").click(function() {
    var $this = $(this),
     $box = $this.parents('article').find('.box');

     if( $box.is(':visible')) $box.hide();
     else $box.show();

  });
});
</script>

entendeu ?

[Nícolas Luís Huber 14]

Sim sim, obrigado William Bruno, a partir de agora antes de usar um fremework eu vou aprender o básico da linguagem primerio. Muito Obrigado e gostei de seu blog;

 

Tópico Resolvido