Slide toggle conflict

[mspace]

Hello in one table I have to options so the user to open and see more info.

@foreach (var item in Model.Request)
       {
         <tr>
            <td>
                @Html.DisplayFor(modelItem => item.RequestTitle)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.RequestContent)
            </td>
              
               <td>
               <a href="#" class="showExtra"><i class="fas fa-plus"></i> 
               </a>
               <a href="#" class="showReplies"><i class="fas fa-info"></i> 
               </a>
            </td>
          </tr>
        <tr>
            <td>
                <div class="extra" style="display:none">
                    extra
                </div>
            </td>
        </tr>

        <tr>
            <td>
              <div class="replies" style="display:none">
                <div> replies</div>
               </div>
             </td>
        </tr>
       }

What I have try is

<script>
        $(".showReplies").click(function () {
            $(this).closest("tr").next("tr").find(".replies").slideToggle("slow");
        })

    
        $(".showExtra").click(function () {
            $(this).closest("tr").next("tr").find(".extra").slideToggle("slow");
        })
    </script>

But It works only for the “extra” class and furthermore it opens all the extra not the first it find . I cannot use ids so I use class. Any idea? Thank you!

[m_hutley]

@mspace

But It works only for the “extra” class

@mspace

       $(".showReplies").click(function () {
            $(this).closest("tr").next("tr").find(".replies").slideToggle("slow");

Are you sure it’s the next tr you want to find? (Hint: If i’m asking you this question, the answer to that is ‘no’, and you should look at your HTML structure again…)

[m_hutley]

@mspace

it opens all the extra not the first it find

find returns the set of ALL matched elements. If you want it to operate slidetoggle on only the first matched element, you should:

• Check to make sure it found some.
• Index the first result appropriately. JQuery selector results can be indexed like an array.

[mspace]

Is the next after the next… How can I achieve the toggle on that? I have two rows in my structure. In one I have my buttons and the others my data.

[m_hutley]

@mspace

How can I achieve the toggle on that?

Nothing stops you from chaining next() calls…you simply want to move to the next sibling of the next sibling.

[mspace]

And how can toggle only the one no all divs with same class? thank you

[m_hutley]

See post #3?

[m3g4p0p]

Hi @mspace, first of all note that your table cells don’t add up correctly – you should add a colspan="3" to those “extra” and “replies” cells. Also, you might consider hiding the entire rows, not just the contained divs so that you don’t have rows without any visible content… are you sure same-level table rows are appropriate here in the first place?

Anyway I would suggest to specify the toggle targets in a more generic manner that doesn’t rely on a certain HTML structure, and chained next() calls that make it rather hard to comprehend which elements you’re trying to find; e.g. using data attributes:

<table>
  <tbody>
    <tr>
      <td>foo</td>
      <td>bar</td>
      <td>
        <a href="#" data-toggle="#extra-1">show extra</a>
        <a href="#" data-toggle="#replies-1">show replies</a>
      </td>
    </tr>

    <tr>
      <td colspan="3">
        <div style="display: none;" id="extra-1">extra</div>
      </td>
    </tr>

    <tr>
      <td colspan="3">
        <div style="display: none;" id="replies-1">replies</div>
      </td>
    </tr>

    <tr>
      <td>beep</td>
      <td>boop</td>
      <td>
        <a href="#" data-toggle="#extra-2">show extra</a>
        <a href="#" data-toggle="#replies-2">show replies</a>
      </td>
    </tr>

    <tr>
      <td colspan="3">
        <div style="display: none;" id="extra-2">extra</div>
      </td>
    </tr>

    <tr>
      <td colspan="3">
        <div style="display: none;" id="replies-2">replies</div>
      </td>
    </tr>
  </tbody>
</table>

$('[data-toggle]').click(function (event) {
  event.preventDefault()
  $(this.dataset.toggle).slideToggle()
})

It doesn’t matter then if the toggle targets are the nth sibling rows of the same table, or located somewhere else entirely.

[mspace]

Thank you for your reply. Now It opens first element from all links that I dynamically create. In every row I have an show extra and show replies…how I can triggered the corresponding row each time?
thank you again

[m3g4p0p]

@mlykov

Now It opens first element from all links that I dynamically create.

You’d also have to set the toggle-target and corresponding id dynamically then – e.g. by appending the item ID (if your items do have an ID of sorts), or just the iteration index otherwise.

[m_hutley]

Is this page somewhere online that we can see it? We may be able to give better solutions/corrections if we can see the output rather than the generator.

[m3g4p0p]

(Or just copy / paste the generated output to a codepen…)

Forum Posting Basics

Strip out PHP (and other backend code) when asking front end questions! If you need help manipulating or styling the HTML generated by a PHP script, for example, include the HTML itself, not the PHP that generates it. E.g. If you want help attaching behaviour to any blockquote elements with a class of “current”, don’t post this: <?php $pdo = new PDO('mysql:host=localhost;dbname=test', 'user', 'password'); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $pdo->exec('SET NAME…