1

Estou fazendo um accordion e já está funcional como eu gostaria (só falta alguns detalhes que irei acertar depois). Só que agora eu preciso que ao ser clicado e o painel expandido, o sinal de + (mostrar mais) seja alterado para - (mostrar menos).

P.S.: Sou iniciante em Javascript, porém a lógica e pegar o nome da classe (ou tentar pegar) e retornar um boolean, se verdadeiro executar tal ação, que é alterar o texto de um determinado elemento.

O que eu tenho:

  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
        panel.style.display = "none";
        } else {
        panel.style.display = "block";
        }
    });
  }
.accordion {
  background-color: #0c4b7a;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.panel p:hover {
  background-color: #F47920;
  color: white;
}
<h2>Accordion</h2>

<button class="accordion">Título 1 <span style="float: right;font-size: 20px">+</span></button>
<div class="panel">
  <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  <p>There are many variations of passages of Lorem Ipsum available</p>
</div>

<button class="accordion">Título 2<span style="float: right;font-size: 20px">+</span></button>
<div class="panel">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>

O código a seguir seta o nome da classe no elemento:

document.getElementById("myDIV").className = "mystyle";

Eu queria fazer tipo um get e salvar em uma variável e verificar se é true, se for realizar a lógica citada mais acima.

4
  • Olha, o document.getElementById() deixa claro, "Documento.PegarElementoPeloID()"... Neste caso, você deve utilizar o document.getElementsByClassName() para poder pegar a classe do que você quer... Exempĺo: "document.getElementsByClassName("output")" 10/12/2019 às 11:46
  • Sim, porém eu irei pegar o elemento pela classe e todos os seus filhos, correto? Se tiver como pegar a classe e realizar um filtro para pegar somente o nome dela ou montar um array para enfim verificar qual possui a classe active ai tudo bem. 10/12/2019 às 12:22
  • 1
    Neste caso: document.getElementsByClassName("output").value(), se quiser fazer isso com JQuery, fica até mais simples.... $("output).val() 10/12/2019 às 12:34
  • valeu, mas eu estou fazendo isso para aprender javascript vanilla, pois estou querendo aprender Reactjs depois. 10/12/2019 às 12:38

2 Respostas 2

2

Para isso basta você pegar o item do acordeão que foi clicado utilizando o primeiro parâmetro da função que você declara no click.

Feito isso, você consegue acessar o currentTarget do evento, que te retorna o elemento cujo o click está atrelado e pode pegar o span utilizando o querySelector para, então, alterar o textContent, conforme exemplo a seguir:

var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function(e) {
        let elem = e.currentTarget.querySelector('span');
        elem.textContent = elem.textContent === '+' ? '-':'+';
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
        panel.style.display = "none";
        } else {
        panel.style.display = "block";
        }
    });
  }
.accordion {
  background-color: #0c4b7a;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.panel p:hover {
  background-color: #F47920;
  color: white;
}
<h2>Accordion</h2>

<button class="accordion">Título 1 <span style="float: right;font-size: 20px">+</span></button>
<div class="panel">
  <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  <p>There are many variations of passages of Lorem Ipsum available</p>
</div>

<button class="accordion">Título 2<span style="float: right;font-size: 20px">+</span></button>
<div class="panel">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>


Outra possibilidade, sem utilizar o evento recebido é fazer da seguinte forma:

var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        this.querySelector('span').textContent = this.classList.contains('active') ? '-' : '+';
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
        panel.style.display = "none";
        } else {
        panel.style.display = "block";
        }
    });
  }
.accordion {
  background-color: #0c4b7a;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.panel p:hover {
  background-color: #F47920;
  color: white;
}
<h2>Accordion</h2>

<button class="accordion">Título 1 <span style="float: right;font-size: 20px">+</span></button>
<div class="panel">
  <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  <p>There are many variations of passages of Lorem Ipsum available</p>
</div>

<button class="accordion">Título 2<span style="float: right;font-size: 20px">+</span></button>
<div class="panel">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>

Dessa forma, você pode usar direto o this para pegar o span do + e alterar para menos verificando se o classList dele contem a classe active.

1
  • 1
    Ambas funciona, mas achei a segunda maneira melhor por utilizar a referência da própria classe. Valeuuu! 10/12/2019 às 12:27
0

Pegar o nome da classe se for um input ou select:

var elementos = document.getElementsByClassName("nome da classe").value;

Pegar o conteúdo de um elemento se não for input ou select:

var elementos = document.getElementsByClassName("nome da classe").innerHTML;

Verificar se um elemento é boleano

if (typeof elementos === "boolean") {
  //Faz aqui sua condição caso a sua variável de teste for booleana
}

OBS: Não entendi direito se é isso que você quer. Pareceu ser pegar o valor de um elemto e verificar se ele é boleano.

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 .