Estoy haciendo una especie de slider con 2 divs. 1 escondido del otro. pero, estoy intentando que se ejecute solo las animaciones para 1 div y no en todos.
Estructura HTML:
<div class="grid-item" id="color-PW"> <!--div contenedor-->
<i class="fas fa-ruler-horizontal"></i> <!--Este es un icono que tiene-->
<div class="arrow1"> <!--este div contiene el icono, a el le asigne el evento para desplazar el otro div (el que contiene el parrafo-->
<i class="fas fa-angle-down"></i>
</div>
<div class="contain-child"> <!--Contenedor del texto-->
<div class="grid-item-child" id="color-W"> <!--Cada uno de estos elementos tiene un id, esto lo hago para modificar el color y estilos de este. -->
<h4>Wireframe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, iste. Architecto aperiam harum.</p>
</div>
</div>
</div>
CSS: Animaciones.
.active { /*Con esta clase desplazado el div que tengo detrás (el del contenido de cada div)*/
transform: translateY(99%);
}
.grid-item.slide { /*Esto lo que hace es retroceder un poco el principal, para que se note el slider*/
transform: translateY(-5%);
transition: 0.5s
}
.rotate /*Lo añado al icono arrow para un efecto sube y baja */
{
transform: rotate(180deg);
transform-origin: center center;
}
Jquery: Aca le estoy defiendo mi clase a todos las clases con containt-child lo cual hace que todos se ejecuten al mismo tiempo, entonces mi pregunta es: Habrá un manera para evitar es comportamiento en todos? por que estaria bien si se hiciera solo cuando el usuario presione en flecha y se desplaza el contenido de solo 1 div y luego se pueda cerra cuando se le vuelva a clickear.
$(function() {
$('.arrow1').click(function() {
$('.contain-child').toggleClass('active');
$('arrow1').toggleClass('rotate');
$('.grid-item').toggleClass('slide');
});
});
Por alguna razon, no deja poner el codigo de prueba pero les coloco algunas imagenes para que puedan ver lo que quiero hacer.
Div al momento de hacer click a la flecha (mostrando su contenido).
Aca es cuando se cierra si se le da click.