1

Olá, gostaria de fazer um script semelhante ao accordion.

Meu HTML

<div class="pergunta">
    <h3>Titulo</h3>
    <article>Texto</article>
</div>

<div class="pergunta">
     <h3>Titulo</h3>
     <article>Texto</article>
</div>

A ideia é que quando clicar no H3, abra o article correspondente. Fiz meu jQuery da seguinte forma

var aux = 0;
$(".pergunta").click(function(){
    if(aux == 0){
        $("article", this).slideDown();
        aux++;
    }else{
        $("article", this).slideUp();
        aux--;
    }
});

Compila. Mas se eu clicar em qualquer lugar da div pergunta, ele fecha novamente. Por isso, queria fazer algo tipo:

var aux = 0;    
$(".pergunta h3").click(function(){
    if(aux == 0){
        $(this).parent().children('article').slideDown();
        aux++;
    }else{
        $(this).parent().children('article').slideUp();
        aux--;
    }
});

Não compila, imagino que esteja errado. Só pra elucidar mesmo. Como posso fazer sem usar IDs? De forma a economizar código.

1

1 Resposta 1

4

Imagine a seguinte situação:

Ao clicar em um <h3> dentro de uma <div class="pergunta"> pela primeira vez, sua variável aux terá o valor incrementado para 1. Em seguida, ao clicar em um <h3> de outra <div>, o valor da variável aux será mantido, ou seja, será executado o else para esse outro elemento.

Acredito que esse seja o problema no seu código, pois a variável x, da forma como você utilizou, está em escopo global sendo consequentemente "compartilhada" no momento em que os eventos de cliques forem disparados.

Uma solução é utilizar o atributo data do HTML5 para gerenciar o estado dos elementos individualmente (se estão "visíveis" ou não).

Por exemplo:

$(".pergunta > h3").on('click', function () {
  // Captura o próximo elemento após o <h3>, no caso, o <article>
  var article = $(this).next(); 
  
  // Captura todos os <article>, exceto o que está sendo referenciado
  var all = $('.pergunta > article').not(article);
  
  if (article.data('visivel') === false) {
    article.data('visivel', true).slideDown();
    
    // Fecha todos os outros <article>
    all.data('visivel', false).slideUp();
  } else {
    article.data('visivel', false).slideUp();
  }
});
.pergunta > h3 {
  cursor: pointer;
}

article {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pergunta">
    <h3>Titulo</h3>
    
    <article data-visivel="false">Texto</article>
</div>

<div class="pergunta">
     <h3>Titulo</h3>
     
     <article data-visivel="false">Texto</article>
</div>

Respondendo a sua pergunta, acredito que nesse caso não é necessário utilizar IDs, visto que é uma interação compartilhada (vários elementos com o mesmo comportamento).

Espero ter ajudado!

1
  • 1
    Obrigada, Paulo! Pela solução e pela explicação excelente. Contribuiu demais para meu aprendizado :) 17/02/2019 às 17:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .