Galera, estou com um problema ao criar um slide para cada div. Estou fazendo um codigo que vai criar x divs iguais, porém com conteudos diferentes e preciso que cada uma tenha um botão para realizar um slide up com suas informações... Como nao sei quantas divs serão criadas (vai depender da resposta do servidor) tentei montar um jquery para que cada div funcionasse de forma independente, porém só na primeira div está funcionando... Podem dar uma olhada?
Aqui tem o exemplo 100% funcionando, porém para uma div só: http://bootsnipp.com/snippets/e3m8D
Aqui tem o código que tentei montar: https://jsfiddle.net/h5uspke4/
$('#show').on('click', function() {
$(this).parent().parent().children('.card-reveal').slideToggle('slow');
});
$('.close').on('click', function() {
$(this).parent().parent().children('.card-reveal').slideToggle('slow');
});
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
.card .card-image {
overflow: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card .card-image img {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.card .card-image:hover img {
/*-webkit-transform: scale(1.2) rotate(-7deg);
-moz-transform: scale(1.2) rotate(-7deg);
-ms-transform: scale(1.2) rotate(-7deg);
-o-transform: scale(1.2) rotate(-7deg);
transform: scale(1.2) rotate(-7deg);*/
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2));
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.card {
font-family: 'Roboto', sans-serif;
margin-top: 0px;
position: relative;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.card .card-content {
padding: 10px;
}
.card .card-content .card-title,
.card-reveal .card-title {
font-size: 24px;
font-weight: 200;
}
.card .card-action {
padding: 20px;
border-top: 1px solid rgba(160, 160, 160, 0.2);
}
.card .card-action a {
font-size: 15px;
color: #ffab40;
text-transform: uppercase;
margin-right: 20px;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
-ms-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.card .card-action a:hover {
color: #ffd8a6;
text-decoration: none;
}
.card .card-reveal {
padding: 20px;
position: absolute;
background-color: #FFF;
width: 100%;
overflow-y: auto;
/*top: 0;*/
left: 0;
bottom: 0;
height: 100%;
z-index: 1;
display: none;
}
.card .card-reveal p {
color: rgba(0, 0, 0, 0.71);
margin: 20px;
}
.btn-custom {
background-color: transparent;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="">
</div>
<!-- card image -->
<div class="card-content">
<span class="card-title">Material Cards</span>
<button type="button" id="show" class="btn btn-custom pull-right" aria-label="Left Align" value="show">
<i class="fa fa-ellipsis-v"></i>
</button>
</div>
<!-- card content -->
<div class="card-action">
<a href="#" target="new_blank">Link</a>
<a href="#" target="new_blank">Link</a>
<a href="#" target="new_blank">Link</a>
<a href="#" target="new_blank">Link</a>
<a href="#" target="new_blank">Link</a>
</div>
<!-- card actions -->
<div class="card-reveal">
<span class="card-title">Card Title</span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
<!-- card reveal -->
</div>
<div class="card">
<div class="card-image">
<img class="img-responsive" src="">
</div>
<!-- card image -->
<div class="card-content">
<span class="card-title">Material Cards</span>
<button type="button" id="show" class="btn btn-custom pull-right" aria-label="Left Align" value="show">
<i class="fa fa-ellipsis-v"></i>
</button>
</div>
<!-- card content -->
<div class="card-action">
<a href="#" target="new_blank">Link</a>
<a href="#" target="new_blank">Link</a>
<a href="#" target="new_blank">Link</a>
<a href="#" target="new_blank">Link</a>
<a href="#" target="new_blank">Link</a>
</div>
<!-- card actions -->
<div class="card-reveal">
<span class="card-title">Card Title</span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
<!-- card reveal -->
</div>
</div>
</div>
</div>