Jax-p Jax-p - 4 months ago 10
jQuery Question

SlideUp more elements as one element

I am trying to make

slideUp()
table rows as a one element, and another rows as different element.

Example - I am having something like this:

<table>
<tr> .. </tr> <!-- slideUp -->
<tr> .. </tr> <!-- slideUp -->
<tr> .. </tr> <!-- I will click on this -->
<tr> .. </tr> <!-- slideUp -->
<tr> .. </tr> <!-- slideUp -->
</table>


But I don't want to slide every row as element, but every rows group as one element

Another example: P.S.: I can click on any DIV! After click every div which is behind will act as one element and every div after will act as one element

<div>
<div> .. </div> <!-- slideUp -->
<div> .. </div> <!-- slideUp -->
<div> .. </div> <!-- I will click on this -->
<div> .. </div> <!-- slideUp -->
<div> .. </div> <!-- slideUp -->
</div>


I want to have it acting like this (but this is not valid HTML):

<table>
<div class="this-will-slide-up>
<tr> .. </tr>
<tr> .. </tr>
<tr> .. </tr>
</div>
<div class="I-will-click-on-this>
<tr> .. </tr>
</div>
<div class="this-will-slide-up>
<tr> .. </tr>
<tr> .. </tr>
<tr> .. </tr>
</div>
</table>

<script>
$('I-will-click-on-this').click(function() {
$('this-will-slide-up').slideUp();
});
<script>


I need it dynamicaly, not staticaly, so I CAN'T surround elements with something, I can click on any row!! I am looking for Javascript solution, not HTML.

I hope you will understand it :)
Thank you for any ideas.

Answer

You can use .nextUntil()

Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

$('.I-will-click-on-this').click(function() {
  $(this).nextUntil('.I-will-click-on-this').slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="I-will-click-on-this">
    I-will-click-on-this
  </div>
  <div>xxxx</div>
  <div>xxxx</div>
  <div>xxxx</div>
  <div>xxxx</div>
  <div>xxxx</div>
  <div class="I-will-click-on-this">
    I-will-click-on-this
  </div>
  <div>xxxx</div>
  <div>xxxx</div>
  <div>xxxx</div>
  <div>xxxx</div>
  <div>xxxx</div>
</div>

Comments