Slide toggle with multiple divs, each div makes its own slide

1

Well, I'm having a problem creating a slide for each div. I am making a code that will create x divs alike, but with different contents and I need each one to have a button to perform a slide up with your information ... I am trying to create a jquery for each div that works independently, but only in the first div it is working ... Can you take a look?

Here is the example 100% working, however for a single div: link

Here is the code I tried to mount: link

$('#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><divclass="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>
    
asked by anonymous 11.08.2016 / 20:32

1 answer

0

The problem is that there can only be 1 unique ID per page. You can have multiple IDs but they must all be different. You can use classes or another attribute to group them, but you can not group with the same ID because it will not work.

Using data-id="show" would already work. You can also compress jQuery to look like this:

$('[data-id="show"], .close').on('click', function() {
    $(this).closest('.card').find('.card-reveal').slideToggle('slow');
});

and in HTML:

<div class="card-content">
    <span class="card-title">Material Cards</span>
    <button type="button" data-id="show" class="btn btn-custom pull-right" aria-label="Left Align" value="show">

jsFiddle: link

    
11.08.2016 / 20:43