Make .click assigned to several same classes work only on clicked element

Question

I need to assign a class and toggle an element on .click. Problem is that I have several element with the same class - and the click will open all of the sub-containers, where I only want to open the container in the element where the click is. I have managed to set the class for just the child of the clicked element, but I cant make the toggle work. What Am I doing wrong?

Fiddle: http://codepen.io/anon/pen/VjevRY

HTML:

<div class="container">
 <a class="click">click me</a>
  <div class="sub-container"></div>
</div>

<div class="container">
 <a class="click">click me</a>
  <div class="sub-container"></div>
</div>

<div class="container">
 <a class="click">click me</a>
  <div class="sub-container"></div>
</div>

<div class="container">
 <a class="click">click me</a>
  <div class="sub-container"></div>
</div>

Script:

$('a.click').click(function() {
 $(this).closest('.container a.click').toggleClass('open');
 $(this).closest('.container .sub-container').slideToggle(600);
});

Possible duplicate of [Getting the ID of the element that fired an event](http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event) — tex, Jun 09 '16 at 07:36

score 1 · Accepted Answer · answered Jun 09 '16 at 07:30

$("a.click").click(function() {
  $(this).toggleClass('open');//use $(this)
  $(this).next(".sub-container").slideToggle(600);//use $(this) and .next()
})

.sub-container {
    width: 300px;
    height: 300px;
    background: black;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <a class="click">click me</a>
  <div class="sub-container"></div>
</div>

<div class="container">
  <a class="click">click me</a>
  <div class="sub-container"></div>
</div>

<div class="container">
  <a class="click">click me</a>
  <div class="sub-container"></div>
</div>

<div class="container">
  <a class="click">click me</a>
  <div class="sub-container"></div>
</div>
Script:

Use $(this) to get the clicked element
Use .next() to get the container of the clicked element

@JerrySvensson glad to help can you update the OP there is no ID in html it is quite misleading. also close the OP by clicking the check mark happy coding mate :) — guradio, Jun 09 '16 at 07:38

Make .click assigned to several same classes work only on clicked element

1 Answers1