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

Question

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"); 
    }); 

});

palaѕн · Accepted Answer · 2020-05-03 15:02:05Z

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>

MD M Nauman · Accepted Answer · 2020-05-03 15:12:25Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related