How to show/hide a repeater table row, which the user clicked

Question

I have a repeater control with table rows to display items fetched from database.

Here is my code:

   <asp:Repeater ID="Repeater1" runat="server">
       <HeaderTemplate>
           <table id="grid">
               <thead>
                   <tr>
                       <th>PNo</th>
                       <th>Start Date</th>
                       <th>End Date</th>
                       ...
                   </tr>
               </thead>
               <tbody>
  </HeaderTemplate>
  <ItemTemplate>
      <tr>
          <td><%#Eval("PNo") %></td>
          <td><%#Eval("startDate") %></td>
          <td><%#Eval("endDate") %></td>
          ...                  
      </tr>
      <tr> --------> want to hide/show this zone of the table
          <td id="tdHidden" colspan="10" class="styleHiddenDiv">
            <div id="divHidden" class="hiddenRow">
                    some content..
           </div>
          </td>
      </tr> -----------
      <tr>
          <td colspan="10">
                  <span id="spn" onclick="showHide('tdHidden');">More..</span>
          </td>
      </tr>
  </ItemTemplate>
       <FooterTemplate>
           </tbody>
           </table>
       </FooterTemplate>
   </asp:Repeater>

I fetch 14 records from Database. According to the table, each record has 3 rows (tr) here.

I want to Hide/Show the second tr in the table. I mean; only the tr before which the rows span (More) clicked.

I hope I could explain..

Can you please help me to figure out?

Answer 1

You have flagged as jquery and hence the jquery solution. Here is how you can do it using jquery toggle.

Add a class name for your span element within the repeater and remove the onclick event.

 <tr>
     <td colspan="10">
           <span id="spn" class="more">More..</span>
     </td>
 </tr>

And your jquery function

$(function () {
    $('.more').on('click', function (e) {
       var elem = $(this).closest('tr').prev();
       elem.toggle();
    });
});

Here is the working Demo

UPDATE: If you want to hide all the toggable row when the page initially loads then use the below code

$(function () {

    // hide all the toggable rows on page load
    $('.more').closest('tr').prev().css('display', 'none');

    $('.more').on('click', function (e) {
       var elem = $(this).closest('tr').prev();
       elem.toggle();
    });
});

or if you don't want to handle this using script then you can just do it using css by setting style="display: none" for the toggable row and the original code should work fine. So your tr would become

<tr style="display: none">
     <td id="tdHidden" colspan="10" class="styleHiddenDiv">
          <div id="divHidden" class="hiddenRow">
              some content..
          </div>
     </td>
</tr>

I have updated the original Demo with your new requirement.