CODEWITHSUNDEEP
javascripthtmljquerytoggle
touinta
touinta

Reputation: 1031

slideToggle conflict in table

I need to display some data on click of an icon in a table. My problem is that only the first tr is affected.

Below my html code

  @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>
       }

And my script code

 <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>

I need to hide/show each tr according to the corresponding click. Any idea? Thank you!

Upvotes: 0

Views: 86

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

you can put logic to have id each div for showExtra and showReplies and attached it to the anchor tag with data-div-id attribute. On click of anchor tag, you can hide all extra and replies div and show the relevent extra or replies on the basis of data-div-id value of clicked anchor.

See below example (please correct @i where i have used to generate unique id for each div as i am not much aware of C# syntax)

@{int i = 0;}
@foreach (var item in Model.Request)
       {
           <tr>
               <td>
               <a href="#" class="showExtra"><i class="fas fa-plus" data-div-id="extraDiv@i"></i> 
               </a>
               <a href="#" class="showReplies"><i class="fas fa-info" data-div-id="repliesDiv@i"></i> 
               </a>
            </td>
          </tr>


   
        <tr>
            <td>
                <div class="extra" style="display:none" id="extraDiv@i">
                    extra
                </div>
            </td>
        </tr>

        <tr>
            <td>
              <div class="replies" style="display:none" id="repliesDiv@i">
                <div> replies</div>
               </div>
             </td>
        </tr>
       @{i++;}
       }

Add script as below and show / hide as per the relevant id of clicked showReplies and showExtra

<script>
        $(".showReplies").click(function () {
            //hide all replies and extras -- you can remove this if not required
            ('div[id^=repliesDiv]').hide();
            ('div[id^=extraDiv]').hide();
            //show relevent div
            var divId = $(this).data('div-id');
            $('#' + divId).show();
        })

    
        $(".showExtra").click(function () {
            //hide all replies and extras -- you can remove this if not required
            ('div[id^=repliesDiv]').hide();
            ('div[id^=extraDiv]').hide();
            var divId = $(this).data('div-id');
            $('#' + divId).show();
        })
    </script>

Upvotes: 0

Chaska
Chaska

Reputation: 3205

You are always searching .extra and .replies in the 2nd <tr>. Change the code as below. Find them in table instead.

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

$(".showExtra").click(function() {
  $(this).closest("table").find(".extra").slideToggle("slow");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href="#" class="showExtra">Show Extra</a>
      <a href="#" class="showReplies">Show Replies</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>
</table>

Upvotes: 1

Related Questions