Toggle specific class element with onclick

Question

Currently I have an unordered list of about 10 of these "container"s. Each container has a description and a "help-more-content" button.

    <div id="item" class="container">

          <div class="item">UniqueIdentifierInt</div>

          <a href="someLinkUrl">linkName</a>

          <div class="trackUri">someLinkUrlString</div>

          <div class="description" style="display: none;">DescriptionString</div>

          <a class="mt-help-more-content" href="#"></a>

   </div>

The functionality is supposed to be when you hit the "help-more-content" button for this container, it will then display that containers description.

However at the moment when the button is clicked, it shows the description for ALL containers on the screen.

Here is the current on click

.on("click", ".mt-help-more-content", function(e) {
     $('.description').toggle(); 
}

Now obviously this toggle function is being called on all "description" elements. How can I specify for it to only act on the current container?

I've checked out other answer here, here, and here but to no real avail.

Is it possible to only toggle the specific class? It doesn't seem you can toggle by an id.

I am new to javascript/html since my background is with Java, so apologies if this is something simple.

Any help is greatly appreciated thank you.

Rob M. · Accepted Answer · 2016-08-31T23:30:18.873

1

$.prev will do the trick:

.on("click", ".mt-help-more-content", function(e) {
     $(this).prev('.description').toggle(); 
}

edited Aug 31 '16 at 23:30

answered Aug 31 '16 at 23:23

Rob M.

35,491
6
51
50

`.closest` only goes up through ancestors. If the click is on the container, you would want to use `.find` – Chad Aug 31 '16 at 23:26
Yeah, `.prev` would work. I just noticed the click handler is targetted at the `a` tag after the description. – Chad Aug 31 '16 at 23:29
Geez, I had `prev` up before but took it down. Oh well. thanks for the comments guys – Rob M. Aug 31 '16 at 23:29

score 0 · Answer 2 · answered Aug 31 '16 at 23:28

0

This should work:

.on("click", ".mt-help-more-content", function(e) {
     $(this).siblings(".description").toggle();
}

answered Aug 31 '16 at 23:28

midhunsezhi

461
5
10

Toggle specific class element with onclick

2 Answers2