jQuery addClass example

Change class name on click in jQuery

by CarambaMoreno

HTML

<div class="escenario derecha">
<div class="cortador">
<div class="circulo verde">
</div>
</div>
</div>

<div class="escenario izquierda">
<div class="cortador">
<div class="circulo azul">
</div>
</div>
</div>
<a>Toggle</a>

CSS

html, body{font-size:30px;} .circulo { width: 1rem; height: 1rem; border: 4px solid black; border-radius: 50%; } .cortador { width: 0.5rem; overflow: hidden; transform: translateX(-100%); transition: all 2s linear; transform-origin: right center; } .escenario { width: 1rem; position: relative; overflow: hidden !important; display: inline-block; } .cortador.active { transform: translateX(-100%) rotate(180deg); } .derecha .cortador { transition-delay: 2s !important; transform: translateX(100%); transform-origin: left center; } .derecha .cortador .circulo { transform: translateX(-50%); } .derecha .cortador.active { transform: translateX(100%) rotate(180deg); }

JavaScript

$('a').on('click',function(){
	$('.cortador').toggleClass('active');
});