using nextUntil function to toggle specific table row
<p>I have this table which contains Events, and on a click on its icon ( an arrow ) I create new rows (called child event ) which are then add under the current row. I want, on a click on the same icon to hide its child event, but only his. Right now, f I click on a new event ( a different row) , it will toggle every hidden row, even if they are not relevent to the current row ... </p>

<p>simply I'm trying to force get some kind of UntilNext but I cant get that function to work, and with the simple loop I'm doing atm it skips the oneEvent but triggers EVERY child row and not the one I want. </p>

<pre><code>$('.JSONArrow').on("click", function () {

    var image = $(this);
    var Row = image.closest("tr");

    Row.toggleClass("Opened");

    if (Row.hasClass("Opened")) {

        image.attr("src", "/Images/downArrow.png")

        if (!(Row.hasClass("alreadyOpen"))) {
            var id = image.attr("id");

            $.get("/Home/Child/" + id, function (data) {
                Row.after(data);
                Row.addClass("alreadyOpen");
            });
        }
    } else {
        image.attr("src", "/Images/rightArrow.png");
    }

    var tr = Row.nextAll('tr');

    for (i = 0; i &lt; tr.length; i++) {
        var eventClass = $(tr[i]).attr('class');
        if (eventClass == 'ChildEvent')
            $(tr[i]).slideToggle()
        else {
            if (eventClass == 'oneEvent')
                return;
        }
    }
});
</code></pre>

<p>must be something simple to make nextUntil to work only on child row but I havent manage it so far, according to jquery doc it should be simple like : </p>

<pre><code>   var tr = Row.nextUntil('tr',$(".oneEvent"));

    for (i = 0; i &lt; tr.length; i++) {
        var eventClass = $(tr[i]).attr('class');
        if (eventClass == 'ChildEvent'){
            $(tr[i]).slideToggle()
        }
    }
</code></pre>

<p>but I cant make it work. Anyone could point out how to do it, or use another jquery function I dont know about that would select all('tr") that are linked(childEvent) to my Row variable and not the others. </p>

<p>I'm not sure poeple will undestand more with the hthml if you dont know asp or mvc4, but here goes : EDIT ::</p>

<pre><code>&lt;div class="TableHolder"&gt;
    &lt;table id="mainTable"&gt;
        &lt;thead&gt; 
            &lt;tr class="header"&gt;

                &lt;th class="iconColumn"&gt;Child&lt;/th&gt;

                &lt;th&gt;Date &lt;/th&gt;
                .... other &lt;th&gt;
                &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;

            @Html.EditorFor(x =&gt; x.logs)

 &lt;/table&gt;
</code></pre>

<p>and thats the table row per say : </p>

<pre><code>     string dynamicClass = "";
if (Model.Parent == null )
{
    dynamicClass = "oneEvent";
}
else 
{  
    dynamicClass = "ChildEvent";
}
</code></pre>

<p>} </p>

<pre><code>  &lt;tr class="@dynamicClass"&gt;

      &lt;td class="iconColumn"&gt;
        @if (Model.Parent == null )
        {
            &lt;img class="JSONArrow" id="@Model.EventID" src="~/Images/rightArrow.png"/&gt;
        }
    &lt;/td&gt;

    &lt;td&gt;@Model.TimeUTC.ToString("dddd, dd MMMM yyyy")&lt;br /&gt;@Model.TimeUTC.ToString("HH:mm:ss") &lt;/td&gt;
    .... other column

&lt;/tr&gt;
</code></pre>

<p>I'll try to simplify what I ment : </p>

<p>you have rows.(Event) when you click on a row(Event), new dynamic rows appears under it (called ChildEvent).</p>

<p>if you click a second time on a row(event), you hide the rows if they exists under him, but only if they are  ChildEvent class.</p>

<p>my current code hides ALL the ChildEvent on the table, I want to hide only those under the (event) clicked.</p>

<p>if the user clicks back on a row(event), it will show the (ChildEvent) if they exists, but only the (childEvent) relevant to the row(event) clicked, and not the ChildEvent of the whole table.</p>

<p>childEvent can only be added under its relevant Event.</p>

<p>re-edit :</p>

<pre><code>     row.nextUntil(".oneEvent", ".ChildEvent").slidetoggle();
</code></pre>

<p>this is what i want, textually : toggle the tr who are under the one I clicked, if they have the ChildEvent class. test until you reach a tr who have the class "oneEvent".</p>

<p>I just cant undestand what parameters go where.</p>

<p>rererereedit :</p>

<pre><code>&lt;table&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>ON CLICK :</p>

<pre><code> &lt;table&gt;
  &lt;tr class="oneEvent, Opened, alreadyOpened"&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>click on the same oneEvent</p>

<pre><code> &lt;table&gt;
  &lt;tr class="oneEvent, alreadyOpened"&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>click on a new oneEvent : </p>

<pre><code>&lt;table&gt;
  &lt;tr class="oneEvent, alreadyOpened"&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class="oneEvent, Opened, alreadyOpened"&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>click on another new oneEvent</p>

<pre><code>&lt;table&gt;
  &lt;tr class="oneEvent, alreadyOpened"&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class="oneEvent, Opened, alreadyOpened"&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
  &lt;tr class="oneEvent, Opened, alreadyOpened"&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
</code></pre>

<p></p>

<p>click back on an earlier one Event :</p>

<pre><code>&lt;table&gt;
  &lt;tr class="oneEvent, alreadyOpened"&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class="oneEvent, Opened, alreadyOpened"&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
  &lt;tr class="oneEvent, alreadyOpened"&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
</code></pre>

<p></p>

<p>click on the 1st OneEvent :</p>

<pre><code>&lt;table&gt;
  &lt;tr class="oneEvent, Opened, alreadyOpened"&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class="oneEvent, Opened, alreadyOpened"&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = true&gt;&lt;/tr&gt;
  &lt;tr class="oneEvent, alreadyOpened"&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
   &lt;tr class=ChildEvent display = false&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
  &lt;tr class=oneEvent&gt;&lt;/tr&gt;
</code></pre>

<p></p>
