CODEWITHSUNDEEP
htmljquerycss
Jack Averill
Jack Averill

Reputation: 841

How can I target child of specific parent with click effect using jQuery?

I'm trying to find out how to edit this jQuery code so that only the parent whose button is clicked shows its child. At the moment, all the children are shown when any button is clicked, not the one nested in the targeted parent.

I have tried using 

$(this).find(".child").toggleClass("open");

but this didn't work.

Any help much appreciated.

https://jsfiddle.net/jf1ya0cz/2/

HTML

    <div class="parent">
     <div class="child">
     </div>
    </div>

    <div class="parent">
     <div class="child">
     </div>
    </div>

    <div class="parent">
     <div class="child">
     </div>
    </div>

CSS


    .parent {
      position:relative;
      width:100px;
      height:100px;
      background:red;
      display:inline-block;
      float:left;
      margin-right:6px;
    }

    .child {
      width:inherit;
      height:30px;
      position:absolute;
      bottom:0;
      background-color:blue;
      opacity:0;
      transition:0.5s;
    }

    .child.open {
      opacity:1;
    }

    .button {
      float: left;
      background: yellow;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 0;
      left: 0;
    }

jQuery

jQuery(document).ready(function($) {    

    $( "<span class='button'></span>" ).insertBefore( ".child" );

$(".button").click(function() { 
        $(".child").toggleClass("open"); 
    }); 

});

Upvotes: 0

Views: 1085

Answers (2)

MD M Nauman
MD M Nauman

Reputation: 431

the big mistake you were making was you are using .child selector on click this will select all the elements attributed with this class name. There are many ways you can achieve this, You can achieve this using Vanilla Javascript there is no need for Jquery too. Here is my approach.

jQuery(document).ready(function($) {	

	
$(".parent").click(function(e) { 
			e.target.firstElementChild.classList.toggle("open")
	}); 
	
});
.parent {
  position:relative;
  width:100px;
  height:100px;
  background:red;
  display:inline-block;
  float:left;
  margin-right:6px;
}

.child {
  width:inherit;
  height:30px;
  position:absolute;
  bottom:0;
  background-color:blue;
  opacity:0;
  transition:0.5s;
}

.child.open {
  opacity:1;
}

.button {
	float: left;
	background: yellow;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
 	 <div class="child">
 	 </div>
	</div>

	<div class="parent">
 	 <div class="child">
 	 </div>
	</div>

	<div class="parent">
 	 <div class="child">
 	 </div>
	</div>

Upvotes: 1

palaѕн
palaѕн

Reputation: 73906

Instead of $(this).find(".child") you need to use $(this).next(".child") because .child here is not the child element of .button but the immediately following sibling of the .button instead. So, your code will be like:

jQuery(document).ready(function($) {
  $("<span class='button'></span>").insertBefore(".child");

  $(".button").click(function() {
    $(this).next(".child").toggleClass("open");
  });
});
.parent{position:relative;width:100px;height:100px;background:red;display:inline-block;float:left;margin-right:6px}
.child{width:inherit;height:30px;position:absolute;bottom:0;background-color:#00f;opacity:0;transition:.5s}
.child.open{opacity:1}
.button{float:left;background:#ff0;width:40px;height:40px;position:absolute;top:0;left:0}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
  </div>
</div>

<div class="parent">
  <div class="child">
  </div>
</div>

<div class="parent">
  <div class="child">
  </div>
</div>

Upvotes: 2

Related Questions