Estoy realizando una página para un grupo. En una sección de la página, se muestra a las personas que lo conforman. Usé una especie de tarjeta de perfil que funciona con CSS3 y jQuery.
El problema que tengo es que al mostrar la información de la persona, se abren la de todos. Lo que necesito, es que se muestre la información sólo de la persona seleccionada.
$(document).ready(function(e) {
$(".view").click(function(e) {
$(".dettales_perfil").addClass('activado');
});
$(".cerrar_perfil").click(function(e) {
$(".dettales_perfil").removeClass('activado');
});
});
.profile {
position: relative;
width: 300px;
height: 450px;
background-color: #FFFFFF;
box-sizing: border-box;
border: 1px solid #D3D3D3;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 20px 20px rgba(0, 0, 0, .2);
}
.profile img {
max-width: 100%;
}
.profile .view {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
margin: 0;
padding: 5px 10px;
background-color: #59B548;
color: #FFFFFF;
border-radius: 15px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
font-size: 12px;
}
.dettales_perfil {
height: 50%;
width: 100%;
background-color: #FFFFFF;
position: absolute;
bottom: 30px;
text-align: center;
padding: 20px;
box-sizing: border-box;
transition: .5s;
transform-origin: bottom;
transform: perspective(500px) scale(0);
}
.dettales_perfil.activado {
bottom: 0;
transform: perspective(500px) scale(1);
}
.dettales_perfil h2 {
margin: 0;
padding: 0;
color: #607D8B;
font-size: 18px;
text-transform: uppercase;
}
.dettales_perfil h2 span {
font-size: 14px;
color: #CCCCCC;
}
.dettales_perfil p {
margin: 0;
padding: 10px 0 0;
color: #AAAAAA;
}
.cerrar_perfil {
font-size: 20px;
position: absolute;
top: 5%;
right: 5%;
color: #F00;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="profile">
<img src="../imagenes/lili.jpg" alt="Foto">
<label class="view">Ver perfil</label>
<div class="dettales_perfil">
<h2>Famoso<br><span>Cargo</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo illum, eum temporibus cupiditate vel facere esse sed, ut porro quae explicabo inventore incidunt et, deserunt repellendus non officia tenetur animi!</p>
<div class="cerrar_perfil"><i class="fa fa-times-circle"></i></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="profile">
<img src="../imagenes/lili.jpg" alt="Foto">
<label class="view">Ver perfil</label>
<div class="dettales_perfil">
<h2>Famoso<br><span>Cargo</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo illum, eum temporibus cupiditate vel facere esse sed, ut porro quae explicabo inventore incidunt et, deserunt repellendus non officia tenetur animi!</p>
<div class="cerrar_perfil"><i class="fa fa-times-circle"></i></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="profile">
<img src="../imagenes/lili.jpg" alt="Foto">
<label class="view">Ver perfil</label>
<div class="dettales_perfil">
<h2>Famoso<br><span>Cargo</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo illum, eum temporibus cupiditate vel facere esse sed, ut porro quae explicabo inventore incidunt et, deserunt repellendus non officia tenetur animi!</p>
<div class="cerrar_perfil"><i class="fa fa-times-circle"></i></div>
</div>
</div>
</div>
</div>
Este es un ejemplo de lo que tengo. Y justo así es cómo funciona.
Lo he intentado así:
$(document).ready(function(e){
$(".view").click(function(e){
$(".dettales_perfil").parent(this).addClass('activado');
});
$(".cerrar_perfil").click(function(e){
$(".dettales_perfil").parent(this).removeClass('activado');
});
});
Y así:
$(document).ready(function(e){
$(".view").click(function(e){
$(".dettales_perfil:nth-child(1)").addClass('activado');
});
$(".cerrar_perfil").click(function(e){
$(".dettales_perfil:nth-child(1)").removeClass('activado');
});
});
POr favor, si alguien pudiera ayudarme. No e gustaría usar ID, puesto que la información va a ser totalmente descargada de una base de datos y se generarían id distinto por cada registro.
Agradezco mucho quien me pueda ayudar.