CODEWITHSUNDEEP
jqueryasp.net-mvcforeach
Steve H
Steve H

Reputation: 13

Increase div id by 1 using jQuery

I would appreciate any and all help you can provide. I have searched high and low and have not been able to find a solution to what I think is probably a common issue. I am very new to ASP.NET MVC and jQuery so I may need a little extra hand holding. Here it goes...

I have a table with many rows that is created by a foreach (ASP MVC 4). Each row has additional information that I would like to show / hide on click (contained in a ).

For example:

====================================================================
   | Ticket Number | Date Created | Description

-    123456          11/02/2012     How do I...?
      --- Additional Information ---
      Assigned To: Joe
      Notes: Blah, blah
      --- End Additional Information ---
+     123457          11/01/2012     When I click this I get....
=====================================================================

When the user clicks the plus sign (I'm using an image), I want the Additional Information to expand and I want the plus image to change to a minus image.

I have figured out how to change the image using an IF statement in jQuery. However, I can't quite figure out how to toggle the div properly. I have tried doing this using the following:

   $("button").click(function () {
       $(this).next("div.toggleMe").toggle(1000);
   });

As you can see, the jQuery expands the next div that it finds. The problem with this is that I can't put it in the same row as the table data. It just doesn't see the next div for some reason.

What I am looking for is a way to increase the id, or class of the div by one so that I can use something like the following jQuery function:

    function slideonlyone(thechosenone) {
         $('.newboxes2').each(function(index) {
              if ($(this).attr("id") == thechosenone) {
               $(this).slideDown(200);
              }
              else {
                   $(this).slideUp(600);
              }
         });
    }

<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader1" href="javascript:slideonlyone('newboxes1');" >slide this one only</a>
         </div>
         <div class="newboxes2" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader2" href="javascript:slideonlyone('newboxes2');" >slide this one only</a>
         </div>
         <div class="newboxes2" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader3" href="javascript:slideonlyone('newboxes3');" >slide this one only</a>
         </div>
         <div class="newboxes2" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div>
      </td>
   </tr>
</table>

As you can see in the HTML, each div has a unique id. How do I create a unique id in a foreach loop? And, how do I get jQuery to see that unique id so that I can toggle the div?

Thank you so much for any info you can provide!

Upvotes: 1

Views: 298

Answers (1)

haliphax
haliphax

Reputation: 393

If your HTML is structured like this:

<div>
    <button>Click me</button>
</div>
<div class="toggle">
    This is initially hidden content
</div>

Then a $(this).next('div') call from the perspective of the button isn't going to find your second div—it's being bound by its parent div. What you're really trying to do is find the next div starting from the button's parent element.

$('button').click(function(){
    $(this).parent().next('div.toggle').toggle(1000);
});

Using the HTML above, that script snippet should begin its search for the next div beginning with the button's parent div. In this circumstance, it should find the correct element to toggle.

Upvotes: 2

Related Questions