Deixando o JQuery: toggleClass em puro JavaScript

O toggleClass() é um método do jQuery que adiciona ou remove uma classe CSS de um determinado elemento, o seu uso mais comum eu diria que é para renderizar ou não determinado elemento HTML, esse efeito conhecido como hide/show funciona adicionando e removendo uma classe com um display: none, mas o toggleClass() é útil para qualquer efeito de mudanças de CSS.

HTML:

<button onclick="toggleClass('#divHide')"> Mostrar/Esconder </button>
<div class="hidden" id="divHide">Alguma informação legal</div>

JavaScript(1):

function toggleClass(el){
	el = document.querySelector(el);
	className = 'hidden';
	if (el.classList) {
		el.classList.toggle(className);
	} else {
		var classes = el.className.split(' ');
		var existingIndex = classes.indexOf(className);
	
		if (existingIndex >= 0)
			classes.splice(existingIndex, 1);
		else
			classes.push(className);
	
		el.className = classes.join(' ');
	}
}

Classe hidden:

.hidden {
    display: none !important;
}

Referências:

  1. http://youmightnotneedjquery.com/

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *