SlideUp more elements as one element

Question

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.

Invalid HTML as `table` can not have `div` as its direct child element. see https://developer.mozilla.org/en/docs/Web/HTML/Element/table — Satpal, Aug 02 '16 at 11:34
@Satpal He wrote it he knows it, I think this is only for demonstration purpose — vaso123, Aug 02 '16 at 11:37
I don't know how to do it in HTML too. I need it dynamical. I will add example in divs — Jax-p, Aug 02 '16 at 11:40

Satpal · Accepted Answer · 2016-08-02T12:04:51.047

2

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>

edited Aug 02 '16 at 12:04

answered Aug 02 '16 at 11:40

Satpal

132,252
13
159
168

Thank you for idea, but it is impossible to do this dynamically. I need javascript solution, not HTML :( – Jax-p Aug 02 '16 at 11:43
NIce! :) Tyvm I didn't know this function – Jax-p Aug 02 '16 at 11:48
Well, not at all. I don't see any "slide" animation. It just disapears without anymation. :o (but there should be some) It is exactly this thing, but I've to do the all rows to "slideUp" as one div. – Jax-p Aug 02 '16 at 12:00
1

@Jax-p, Its create problem with table rows see http://stackoverflow.com/questions/5126704/slidetoggle-in-table-row I have updated answer with div – Satpal Aug 02 '16 at 12:05
Great one! Work's perfectly now. – Jax-p Aug 02 '16 at 12:14

SlideUp more elements as one element

1 Answers1