1
Guys, I have a problem creating a slide for each div. I’m making a code that will create x equal Ivs, but with different contents and need each one to have a button to perform a slide up with your information... As I do not know how many Divs will be created (it will depend on the server response) I tried to mount a jquery so that each div worked independently, but only in the first div is working... You can take a look?
Here’s the 100% working example, but for a single div: http://bootsnipp.com/snippets/e3m8D
Here’s the code I tried to put together: 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>