Como converter esse JQuery em JavaScript?

[Mech 0]

Achei esse codigo jquery:

 $('.wrap a').click(function () {
     $(this).parent().next().toggleClass('active');     
 });

Ele basicamente faz, ao clicar, aparecer um texto. Exemplo: https://jsfiddle.net/Lq2pw6j7/32/

Mas, como eu faria esse mesmo código em javascript puro?

 

EU ja fiz um código puro com 2 funções, uma abrir e uma fechar, que troca o .style.display para none ou block. Mas não especifica a classe que vai ser.

Como no exemplo acima, são vários botões com o mesmo código(jquery). E eu queria aprender a faze-lo em js.

[Omar~ 87]

Muito simples...

Vamos a um pequeno guia porque qualquer coisa sem jquery é muito mais eficiente independente da situação.

 

A primeiramente temos que pegar o elemento que queremos acionar quando for clicado.

Pode ser feito de suas formas

document.getElementsByClassName('wrap');

Qualquer elemento no DOM que tiver a class 'warp' é alvo da funcionalidade.

 

document.querySelectorAll('.wrap a');

Qualquer elemento no DOM que tenha a class 'warp' e que seja de TAG 'a' é alvo da funcionalidade.

 

Diferença entre os dois? A primeira consome menos memória, mas trás margem de erro caso não saiba projetar bem o HTML, uma vez como dito qualquer elemento que tenha essa className é alvo, o segundo já trás menos responsabilidade  de ter que programar corretamente o javascript

 

Vou optar pelo segundo porque não sei como é toda sua estrutura HTML, então armazeno todos os elementos em variável

var wrap = document.querySelectorAll('.wrap a');

Agora é simples, faço um loop pedindo a contagem de todos os elementos alvos e armazeno eles em array

for (var i = 0; i < wrap.length; i++) {}

Uma vez que tenho todos elementos em array basta que eu adicione um evento click em cada um deles, acionando ele com parâmetro para não ter que referenciar o atual usando this

wrap[i].addEventListener('click', function (e) {});

Agora o que tenho que fazer é pegar esse elemento que foi clicado e informar para o javascript que quero trabalhar seus elementos filhos no DOM

.wrap a > .box

var elemento = e.target.parentNode;

Dentro dessa questão sei que só tem um parente então já ataco diretamente ele adicionando a class que interessa.

elemento.nextElementSibling.classList.toggle('active');

 

Resultado final:

var wrap = document.querySelectorAll('.wrap a');
for (var i = 0; i < wrap.length; i++) {
  wrap[i].addEventListener('click', function (e) {
    var elemento = e.target.parentNode;
    elemento.nextElementSibling.classList.toggle('active');
  });
}

Devido ao uso da função nativa toggle se a class não existe ela é adicionado, do contrário é removida

 

Nota: É necessário que o todo HTML já tenha sido devidamente processado pelo navegador, caso contrário não será possível localizar os elementos (Básico de manipulação com javascript "adicione o script no final do documento antes do fechamento da TAG body")