CODEWITHSUNDEEP
jquery
Jax-p
Jax-p

Reputation: 47

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.

Upvotes: 0

Views: 29

Answers (1)

Satpal
Satpal

Reputation: 133403

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>

Upvotes: 2

Related Questions