Expand Only the Child Div Within Parent

Question

I'm trying to only show a child div when the parent div's text is shown, instead of all the other divs with the same name. Imagine four div's with classes of "lead" and within those leads, there is a normaldiv child. Rather than open all the childs in other lead divs, I only want the one child within each lead.

Example HTML:

<div class="lead"><div class="normaldiv">1</div></div>
<div class="lead"><div class="normaldiv">2</div></div>
<div class="lead"><div class="normaldiv">3</div></div>
<div class="lead"><div class="normaldiv">4</div></div>

jQuery - this expands all normal divs

$(".lead").click(function() {
  $(".normaldiv").slideToggle("slow");
});

Tested:

$(this).parent().children(".normaldiv").slideToggle("slow");

The tested one I thought would grab all the children within the parent div and only expand those on a click. However, nothing shows up on a click event.

Is the second example enclosed in a click handler like the first? — Jonathan Lam, Jan 03 '17 at 17:44
Why not just try `$(this).children(".normaldiv").slideToggle("slow")`? — Jonathan Lam, Jan 03 '17 at 17:45

score 2 · Answer 1 · answered Jan 03 '17 at 17:46

2

Use $(this).find(".normaldiv") inside your click listener to select only the normaldiv inside the lead element - see demo below:

$(".lead").click(function() {
  $(this).find(".normaldiv").slideToggle("slow");
});

<div class="lead"><div class="normaldiv">1</div></div>
<div class="lead"><div class="normaldiv">2</div></div>
<div class="lead"><div class="normaldiv">3</div></div>
<div class="lead"><div class="normaldiv">4</div></div>

answered Jan 03 '17 at 17:46

kukkuz

41,512
6
59
95

1

Beat me to it and your answer may be better depending on OP context – happymacarts Jan 03 '17 at 17:47
1

as another note [this post](http://stackoverflow.com/questions/648004/what-is-fastest-children-or-find-in-jquery) claims `find` is faster than `children` so you may consider accepting this answer over mine – happymacarts Jan 03 '17 at 17:50
@happymacarts that's a valid point as `normaldiv`s are *direct* children... – kukkuz Jan 03 '17 at 17:51

score 2 · Accepted Answer · answered Jan 03 '17 at 17:46

grab only the children not the parent children

$(".lead").click(function() {
//  $(".normaldiv").slideToggle("slow");
  $(this).children(".normaldiv").slideToggle("slow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lead"><div class="normaldiv">1</div></div>
<div class="lead"><div class="normaldiv">2</div></div>
<div class="lead"><div class="normaldiv">3</div></div>
<div class="lead"><div class="normaldiv">4</div></div>

score 2 · Answer 3 · answered Jan 03 '17 at 17:47

You need to select the children of the .lead elements that you are selecting.

What you are doing currently in the second example is selecting the parent of the .lead element (some container element), and then trying to select .normaldiv out of its children (which are only .lead elements).

$(".lead").click(function() {
  $(this).children(".normaldiv").slideToggle("slow");
});

.lead {
  height: 20px;
  width: 20px;
  background-color: grey;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lead"><div class="normaldiv">1</div></div>
<div class="lead"><div class="normaldiv">2</div></div>
<div class="lead"><div class="normaldiv">3</div></div>
<div class="lead"><div class="normaldiv">4</div></div>

^{Note: CSS added for better visibility.}

Expand Only the Child Div Within Parent

3 Answers3