Mr.NaViD Mr.NaViD - 3 months ago 21
CSS Question

jquery.children works only for the first child

I want to

.slideToggle()
slide class on click of each parent,therefor I'm using
.children()
to access it.but as you see in the snippet it works only for the first div!!

I also have used
.find()
instead of
.children()
but in vain.:(

I appreciate it if someone can tell me my problem.



$(document).ready(function() {
$("#open").click(function() {
$(this).children('#slide').slideToggle();
});
});

*{
margin:0;
padding:0;
}
body{
background-color:#ecf0f5;
overflow-x: hidden;
}
.divider {
height: 1px;
width:100%;
display:block; /* for use on default inline elements like span */
margin: 9px 0;
overflow: hidden;
background-color: #9b9b9b;
margin-top:2px !important;
}
.pointer{
cursor:pointer;
}.slide{
background:#e2e2e2;
padding:20px;
display:none;
margin:10px;
}.full{
width:100%;
}.width{
width:90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full pointer" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;" id="open">
<input type="checkbox" style="-webkit-transform:scale(1.15);" /><br>
<div class="slide width" id="slide">
txt
</div>
</div>
<div class="divider" style="margin:0;"></div>
<div class="full pointer" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;" id="open">
<input type="checkbox" style="-webkit-transform:scale(1.15);" /><br>
<div class="slide width" id="slide">
txt
</div>
</div>
<div class="divider" style="margin:0;"></div>
<div class="full pointer" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;" id="open">
<input type="checkbox" style="-webkit-transform:scale(1.15);" /><br>
<div class="slide width" id="slide">
txt
</div>
</div>
<div class="divider" style="margin:0;"></div>




Answer

Using the same id multiple times is invalid. Use classes for the js part and it will work fine.

$(document).ready(function() {
  $(".open").click(function() {
    $(this).children('.slide').slideToggle();
  });
});

Check this out and let me know your feedback. Thanks!

$(document).ready(function() {
  $(".open").click(function() {
    $(this).children('.slide').slideToggle();
  });
});
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #ecf0f5;
  font-family: IRANSans;
  overflow-x: hidden;
}
.divider {
  height: 1px;
  width: 100%;
  display: block;
  /* for use on default inline elements like span */
  margin: 9px 0;
  overflow: hidden;
  background-color: #9b9b9b;
  margin-top: 2px !important;
}
.pointer {
  cursor: pointer;
}
.slide {
  background: #e2e2e2;
  padding: 20px;
  display: none;
  margin: 10px;
}
.full {
  width: 100%;
}
.width {
  width: 90%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;">
  <input type="checkbox" style="-webkit-transform:scale(1.15);" />
  <br>
  <div class="slide width" id="slide">
    txt
  </div>
</div>
<div class="divider" style="margin:0;"></div>
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;">
  <input type="checkbox" style="-webkit-transform:scale(1.15);" />
  <br>
  <div class="slide width" id="slide">
    txt
  </div>
</div>
<div class="divider" style="margin:0;"></div>
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;">
  <input type="checkbox" style="-webkit-transform:scale(1.15);" />
  <br>
  <div class="slide width" id="slide">
    txt
  </div>
</div>
<div class="divider" style="margin:0;"></div>