Using same Class to use the click method to show the nearest hidden element by its class

Question

What I am trying to achieve: What I am trying to achieve is very simple I have a table with 2 table body tags. The first one gets shown as its just the main content. The last td element has an anchor tag, this anchor tag when clicked should show the next tbody tag using the jQuery method slideToggle().

Problem: The problem I am having is these are dynamically made tables using Angular.js. So if there are 5 items then there are 5 div elements each with a table that all have the same class for each tbody within the div. This makes sense as for each I would like the click function to show that specific tables second div if the user wants to see additional content related to that item.

Things tried:

$(this).next('.test').slideToggle();
$(this).closest('tbody').find('.test').slideToggle();
$(this).closest('.test').slideToggle();
$(this).closest('tr').find('.test').slideToggle();

Posts look into on StackOverflow for similar issue:

Non Stack Overflow sites:

https://www.sitepoint.com/jquerys-closest-parents/

HTML:

<div class="productsList" ng-repeat="products in productListing.products">
    <div class="productSection">
        <div class="figureDiv">
            <figure class="img">
                <img ng-src="{{products.image}}" />
            </figure>
        </div>
        <div class="description">
            <h2 ng-bind="products.summary"></h2>
            <summary ng-bind="products.description"></summary>
        </div>
        <table class="productTable">
            <tbody>
                <tr><td><b>Product Name</b></td><td ng-bind="product.merchantName"></td></tr>
                <tr><td><b>Valid:</b></td><td>{{products.validityStart}} to {{products.valididtyEnd}}</td></tr>
                <tr><td><b>Product Type:</b></td><td>Appliance</td></tr>
                <tr><td><b>Testing:</b></td><td>Yes<a class="testLink" href="">Show More &gt;</a></td></tr>
            </tbody>
            <tbody class="test">
                <tr><td><b>Extra</b></td><td>Extra</td></tr>
                <tr><td><b>Extra</b></td><td>Extra</td></tr>
                <tr><td><b>Extra</b></td><td>Extra</td></tr>
                <tr><td><b>Extra</b></td><td>Extra</td></tr>
            </tbody>
        </table>
    </div>
</div>

jQuery (current implementation):

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

        $(document).on("click", ".productTable .testLink", function (ev) {

        ev.stopImmediatePropagation();
        $(this).closest('tr').find('.test').slideToggle();
        $(".test").slideToggle();
   });
}

Visually from Dynamic content (3 items):

Table  class="productTable"
  tbody
      anchor tag  class="testLink"
  tbody  class="test"

Table  class="productTable"
  tbody
      anchor tag  class="testLink"
  tbody  class="test"

Table  class="productTable"
  tbody
      anchor tag  class="testLink"
  tbody  class="test"

Ending As you can see visually there are 3 tables created each having same classes. So for the first table if the user clicks the anchor tag then the body tag right after in that specific table will be displayed with toggle. Only that one should be shown not all of them which is the current problem.

I tried many solutions however nothing is working, every implementation is making all of them toggle which is horrible.

Will Will · Accepted Answer · 2016-08-19T15:58:10

I think something like this.

  $(".productTable .testLink").on("click", function() {
    $(this).parents('.productTable').children('.test').slideToggle();
  });

.testLink {
  color: blue;
  text-decoration: underline;
}
.test {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="productTable">
  <tbody>
    <tr>
      <td><b>Product Name</b>
      </td>
      <td ng-bind="product.merchantName"></td>
    </tr>
    <tr>
      <td><b>Valid:</b>
      </td>
      <td>{{products.validityStart}} to {{products.valididtyEnd}}</td>
    </tr>
    <tr>
      <td><b>Product Type:</b>
      </td>
      <td>Appliance</td>
    </tr>
    <tr>
      <td><b>Testing:</b>
      </td>
      <td>Yes<span class="testLink">Show More &gt;</span>
      </td>
    </tr>
  </tbody>
  <tbody class="test">
    <tr>
      <td><b>Extra</b>
      </td>
      <td>Extra</td>
    </tr>
    <tr>
      <td><b>Extra</b>
      </td>
      <td>Extra</td>
    </tr>
    <tr>
      <td><b>Extra</b>
      </td>
      <td>Extra</td>
    </tr>
    <tr>
      <td><b>Extra</b>
      </td>
      <td>Extra</td>
    </tr>
  </tbody>
</table>

Using same Class to use the click method to show the nearest hidden element by its class

3 Answers