Sim.
O jQuery é construído em cima de JavaScript e a ideia é basicamente poupar texto quando se escreve. O jQuery e outras bibliotecas corrigem alguns comportamentos diferentes entre browsers e simplificam tarefas que são complexas ou morosas de criar com JavaScript nativo, mas é só isso.
Tudo o que o jQuery faz é escrito/programado com JavaScript.
Em relação a converteres todo o teu jQuery em JavaScript nativo isso pode ser uma boa ideia uma vez que vais poupar largura de banda, acelerar o carregamento do site e aprender muito!
Dá uma olhada antes ao jQuery que tens e repensa quais os browsers que queres suportar. Se forem só browsers modernos, pode ser mesmo o mais indicado tirar o jQuery.
Edit:
(aqui fica uma sugestão para o teu edit na pergunta, de código nativo para substituir jQuery)
var filtros = [].slice.call(document.querySelectorAll('.filters__name'));
document.querySelector('.filters .title').addEventListener('click', function() {
var list = document.querySelector('.filters__list');
list.style.display = list.style.display == 'block' ? 'none' : 'block';
});
function toggleFilters(current) {
return function(e) {
if (filtros.indexOf(e.target) == -1) return;
filtros.forEach(function(el) {
var filter = el.parentElement;
if (el == current) filter.classList.toggle('expand-filter');
else filter.classList.remove('expand-filter');
});
}
}
filtros.forEach(function(el) {
el.addEventListener('click', toggleFilters(el))
});
.title {
margin: 10px;
border-bottom: 1px solid black;
cursor: pointer;
}
.filters__name {
margin-left: 20px;
cursor: pointer;
}
.filters__filter ol > li,
.filters__filter ul > li {
height: 0;
opacity: 0;
transition: height 0.5s, opacity 0.2s;
}
.expand-filter ol > li,
.expand-filter ul > li {
height: 20px;
opacity: 1;
}
<aside class="col-left sidebar">
<div class="filters">
<div class="title title--sm"><span>Filtros</span></div>
<div class="filters__list" style="display: none;">
<div class="filters__filter categoria">
<div class="filters__name">Categoria</div>
<ol>
<li>
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/calca-legging" title="Calça Legging" class="a-filter link">
<span class="label">Calça Legging</span>
<span class="count">(307)</span>
</a>
</li>
<li>
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/top-fitness" title="Tops" class="a-filter link">
<span class="label">Tops</span>
<span class="count">(106)</span>
</a>
</li>
<li>
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/blusas-de-academia" title="Blusas e Camisetas" class="a-filter link">
<span class="label">Blusas e Camisetas</span>
<span class="count">(55)</span>
</a>
</li>
<li>
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/bermuda-para-academia" title="Bermudas" class="a-filter link">
<span class="label">Bermudas</span>
<span class="count">(13)</span>
</a>
</li>
<li>
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/short-de-academia" title="Shorts" class="a-filter link">
<span class="label">Shorts</span>
<span class="count">(14)</span>
</a>
</li>
<li>
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/combos-e-kits" title="Combos e Kits" class="a-filter link">
<span class="label">Combos e Kits</span>
<span class="count">(22)</span>
</a>
</li>
</ol>
</div>
<div class="filters__filter tamanho">
<div class="filters__name">Tamanho</div>
<div class="filters__swatches">
<ul class="ul--0">
<li class="li--0 pp">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=482" title="PP" class="a--0 ">
<span class="label">
<span class="swatch">PP</span>
</span>
</a>
</li>
<li class="li--0 p">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=476" title="P" class="a--0 ">
<span class="label">
<span class="swatch">P</span>
</span>
</a>
</li>
<li class="li--0 m">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=473" title="M" class="a--0 ">
<span class="label">
<span class="swatch">M</span>
</span>
</a>
</li>
<li class="li--0 g">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=474" title="G" class="a--0 ">
<span class="label">
<span class="swatch">G</span>
</span>
</a>
</li>
<li class="li--0 gg">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=475" title="GG" class="a--0 ">
<span class="label">
<span class="swatch">GG</span>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="filters__filter tecido">
<div class="filters__name">Tecido</div>
<ul class="ul--0">
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tecidos=472" title="Poliamida" class="a--0">
<span class="label">Poliamida</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tecidos=471" title="Poliester" class="a--0">
<span class="label">Poliester</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tecidos=470" title="Viscose" class="a--0">
<span class="label">Viscose</span>
</a>
</li>
</ul>
</div>
<div class="filters__filter cor ">
<div class="filters__name">Cor </div>
<ul class="ul--0">
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=73" title="Amarelo" class="a--0">
<span class="label">Amarelo</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=74" title="Azul" class="a--0">
<span class="label">Azul</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=76" title="Branco" class="a--0">
<span class="label">Branco</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=77" title="Cinza" class="a--0">
<span class="label">Cinza</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=85" title="Estampado" class="a--0">
<span class="label">Estampado</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=78" title="Laranja" class="a--0">
<span class="label">Laranja</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=86" title="Multicolorido" class="a--0">
<span class="label">Multicolorido</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=80" title="Preto" class="a--0">
<span class="label">Preto</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=81" title="Rosa" class="a--0">
<span class="label">Rosa</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=82" title="Roxo" class="a--0">
<span class="label">Roxo</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=83" title="Verde" class="a--0">
<span class="label">Verde</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=84" title="Vermelho" class="a--0">
<span class="label">Vermelho</span>
</a>
</li>
</ul>
</div>
<div class="filters__filter beneficios">
<div class="filters__name">Benefícios</div>
<ul class="ul--0">
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=26" title="Anticelulite" class="a--0">
<span class="label">Anticelulite</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=28" title="Disfarça celulite" class="a--0">
<span class="label">Disfarça celulite</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=36" title="Dupla face" class="a--0">
<span class="label">Dupla face</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=27" title="Facilita a transpiração" class="a--0">
<span class="label">Facilita a transpiração</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=31" title="Melhora a circulação" class="a--0">
<span class="label">Melhora a circulação</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=24" title="Modela o corpo" class="a--0">
<span class="label">Modela o corpo</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=32" title="Possui Bolso" class="a--0">
<span class="label">Possui Bolso</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=29" title="Previne dores musculares" class="a--0">
<span class="label">Previne dores musculares</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=25" title="Proteção UV" class="a--0">
<span class="label">Proteção UV</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=30" title="Regula a temperatura do corpo" class="a--0">
<span class="label">Regula a temperatura do corpo</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=33" title="Seca rapidamente" class="a--0">
<span class="label">Seca rapidamente</span>
</a>
</li>
</ul>
</div>
<div class="filters__filter preco">
<div class="filters__name">Preço</div>
<ul class="ul--0">
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=-20" title="R$0,00 - R$19,99" class="a--0">
<span class="label"><span class="price">R$0,00</span> - <span class="price">R$19,99</span></span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=20-40" title="R$20,00 - R$39,99" class="a--0">
<span class="label"><span class="price">R$20,00</span> - <span class="price">R$39,99</span></span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=40-60" title="R$40,00 - R$59,99" class="a--0">
<span class="label"><span class="price">R$40,00</span> - <span class="price">R$59,99</span></span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=60-80" title="R$60,00 - R$79,99" class="a--0">
<span class="label"><span class="price">R$60,00</span> - <span class="price">R$79,99</span></span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=80-" title="acima de R$80,00 " class="a--0">
<span class="label">acima de <span class="price">R$80,00</span> </span>
</a>
</li>
</ul>
</div>
</div>
</div>
</aside>
Para usares jQuery tens de carregar a biblioteca toda. Dá uma olhada aqui: https://code.jquery.com/jquery-2.2.4.js é isso tudo que tens de carregar para podes escrever código jQuery. O meu JavaScript não precisa de nada. Por isso é que é mais leve do que carregando o jQuery.