JQuery expand and collapse row div-CodePudding

I ve a div based table which is loading data dynamically in rows. I m trying to apply Expand and Collapse feature to make view more user friendly and easy to ready which is required.

But i am having some issue. Onclicking Black row which contains New, Confirm etc hide only 1st row but not rest. Whereas i m looking to hide each row which are group by under (Black Row) like New, Confirm, Freed, Cancelled

$(".pointer").click(function() {

  $header = $(this);
  //getting the next element
  $content = $header.next();
  //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
  $content.slideToggle(500, function() {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    $header.text(function() {
      //change text based on condition
      return $content.is(":visible") ? "Collapse" : "Expand";
    });
  });

});

.orders {
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  overflow-y: auto;
  margin-left: 0px;
}

.header-row {
  display: flex;
  flex-flow: row nowrap;
  flex: 1;
  justify-content: space-evenly;
  background: #868686;
  color: white;
}

.pointer {
  cursor: pointer;
}

.orders .order-row {
  display: flex;
  flex-flow: row nowrap;
  flex: 1;
  justify-content: space-evenly;
}

.orders .col.start {
  justify-content: flex-start;
}

.orders .col {
  display: flex;
  flex: 1;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div >
  <div >
    <div >Name</div>
    <div >Date/Time</div>
    <div >Phone</div>
    <div >PAX</div>
    <div >Description</div>
    <div >Table</div>
    <div ></div>
  </div>
  <div style="background: black;color: white;font-weight: bolder;" >
    <div ><span>New</span></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div >
    <div >Mitchell Admin</div>
    <div >2022-05-30 10:00:00</div>
    <div > 1 555-555-5555</div>
    <div >1</div>
    <div ><span style="margin-left: 9px;"></span></div>
    <div >
      <select name="pos_table_id">
        <option value=""></option>
        <option value="1" id="27" data-order-id="27">T1</option>
        <option value="2" id="27" data-order-id="27">T2</option>
        <option value="3" id="27" data-order-id="27">T3</option>
        <option value="4" id="27" data-order-id="27">T4</option>
        <option value="5" id="27" data-order-id="27">T5</option>
        <option value="6" id="27" data-order-id="27">T6</option>
        <option value="7" id="27" data-order-id="27">T7</option>
        <option value="8" id="27" data-order-id="27">T8</option>
        <option value="9" id="27" data-order-id="27">T9</option>
        <option value="10" id="27" data-order-id="27">T10</option>
        <option value="11" id="27" data-order-id="27">T11</option>
        <option value="12" id="27" data-order-id="27">T1</option>
        <option value="13" id="27" data-order-id="27">T2</option>
        <option value="14" id="27" data-order-id="27">T3</option>
        <option value="15" id="27" data-order-id="27">T4</option>
        <option value="16" id="27" data-order-id="27">T5</option>
        <option value="17" id="27" data-order-id="27">T6</option>
        <option value="18" id="27" data-order-id="27">T7</option>
        <option value="19" id="27" data-order-id="27">T8</option>
        <option value="20" id="27" data-order-id="27">T9</option>
        <option value="21" id="27" data-order-id="27">T10</option>
        <option value="22" id="27" data-order-id="27">T11</option>
        <option value="23" id="27" data-order-id="27">T12</option>
      </select>
    </div>
    <div ><button  id="27" data-id="27" data-order-id="27">Validate</button><button  style="display:none;" id="27" data-id="27" data-order-id="27">Free</button></div>
  </div>
  <div style="background: black;color: white;font-weight: bolder;" >
    <div ><span>Confirm</span></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div >
    <div >Mitchell Admin</div>
    <div >2022-06-17 12:00:00</div>
    <div > 1 555-555-5555</div>
    <div >1</div>
    <div ><span style="margin-left: 9px;"></span></div>
    <div >
      <select name="pos_table_id">
        <option value=""></option>
        <option value="1" id="24" data-order-id="24">T1</option>
        <option value="2" id="24" data-order-id="24">T2</option>
        <option value="3" id="24" data-order-id="24">T3</option>
        <option value="4" id="24" data-order-id="24">T4</option>
        <option value="5" id="24" data-order-id="24">T5</option>
        <option value="6" id="24" data-order-id="24">T6</option>
        <option value="7" id="24" data-order-id="24">T7</option>
        <option value="8" id="24" data-order-id="24">T8</option>
        <option value="9" id="24" data-order-id="24">T9</option>
        <option value="10" id="24" data-order-id="24">T10</option>
        <option value="11" id="24" data-order-id="24">T11</option>
        <option value="12" id="24" data-order-id="24">T1</option>
        <option value="13" id="24" data-order-id="24">T2</option>
        <option value="14" id="24" data-order-id="24">T3</option>
        <option value="15" id="24" data-order-id="24">T4</option>
        <option value="16" id="24" data-order-id="24">T5</option>
        <option value="17" id="24" data-order-id="24">T6</option>
        <option value="18" id="24" data-order-id="24">T7</option>
        <option value="19" id="24" data-order-id="24">T8</option>
        <option value="20" id="24" data-order-id="24">T9</option>
        <option value="21" id="24" data-order-id="24">T10</option>
        <option value="22" id="24" data-order-id="24">T11</option>
        <option value="23" id="24" data-order-id="24">T12</option>
      </select>
    </div>
    <div ><button  id="24" data-id="24" data-order-id="24">Free</button><button  style="display:none;" id="24" data-id="24" data-order-id="24">Free</button></div>
  </div>
  <div >
    <div >Mitchell Admin</div>
    <div >2022-05-30 10:00:00</div>
    <div > 1 555-555-5555</div>
    <div >1</div>
    <div ><span style="margin-left: 9px;"></span></div>
    <div >
      <select name="pos_table_id">
        <option value=""></option>
        <option value="1" id="25" data-order-id="25">T1</option>
        <option value="2" id="25" data-order-id="25">T2</option>
        <option value="3" id="25" data-order-id="25">T3</option>
        <option value="4" id="25" data-order-id="25">T4</option>
        <option value="5" id="25" data-order-id="25">T5</option>
        <option value="6" id="25" data-order-id="25">T6</option>
        <option value="7" id="25" data-order-id="25">T7</option>
        <option value="8" id="25" data-order-id="25">T8</option>
        <option value="9" id="25" data-order-id="25">T9</option>
        <option value="10" id="25" data-order-id="25">T10</option>
        <option value="11" id="25" data-order-id="25">T11</option>
        <option value="12" id="25" data-order-id="25">T1</option>
        <option value="13" id="25" data-order-id="25">T2</option>
        <option value="14" id="25" data-order-id="25">T3</option>
        <option value="15" id="25" data-order-id="25">T4</option>
        <option value="16" id="25" data-order-id="25">T5</option>
        <option value="17" id="25" data-order-id="25">T6</option>
        <option value="18" id="25" data-order-id="25">T7</option>
        <option value="19" id="25" data-order-id="25">T8</option>
        <option value="20" id="25" data-order-id="25">T9</option>
        <option value="21" id="25" data-order-id="25">T10</option>
        <option value="22" id="25" data-order-id="25">T11</option>
        <option value="23" id="25" data-order-id="25">T12</option>
      </select>
    </div>
    <div ><button  id="25" data-id="25" data-order-id="25">Free</button><button  style="display:none;" id="25" data-id="25" data-order-id="25">Free</button></div>
  </div>
  <div style="background: black;color: white;font-weight: bolder;" >
    <div ><span>Freed</span></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div >
    <div >Mitchell Admin</div>
    <div >2022-06-23 10:00:00</div>
    <div > 1 555-555-5555</div>
    <div >1</div>
    <div ><span style="margin-left: 9px;">sss asxaa</span></div>
    <div >
      <select name="pos_table_id">
        <option value=""></option>
        <option value="1" id="10" data-order-id="10">T1</option>
        <option value="2" id="10" data-order-id="10" selected="">T2</option>
        <option value="3" id="10" data-order-id="10">T3</option>
        <option value="4" id="10" data-order-id="10">T4</option>
        <option value="5" id="10" data-order-id="10">T5</option>
        <option value="6" id="10" data-order-id="10">T6</option>
        <option value="7" id="10" data-order-id="10">T7</option>
        <option value="8" id="10" data-order-id="10">T8</option>
        <option value="9" id="10" data-order-id="10">T9</option>
        <option value="10" id="10" data-order-id="10">T10</option>
        <option value="11" id="10" data-order-id="10">T11</option>
        <option value="12" id="10" data-order-id="10">T1</option>
        <option value="13" id="10" data-order-id="10">T2</option>
        <option value="14" id="10" data-order-id="10">T3</option>
        <option value="15" id="10" data-order-id="10">T4</option>
        <option value="16" id="10" data-order-id="10">T5</option>
        <option value="17" id="10" data-order-id="10">T6</option>
        <option value="18" id="10" data-order-id="10">T7</option>
        <option value="19" id="10" data-order-id="10">T8</option>
        <option value="20" id="10" data-order-id="10">T9</option>
        <option value="21" id="10" data-order-id="10">T10</option>
        <option value="22" id="10" data-order-id="10">T11</option>
        <option value="23" id="10" data-order-id="10">T12</option>
      </select>
    </div>
    <div ><button  style="display:none;" id="10" data-id="10" data-order-id="10">Free</button></div>
  </div>
  <div >
    <div >Mitchell Admin</div>
    <div >2022-06-06 01:00:00</div>
    <div > 1 555-555-5555</div>
    <div >1</div>
    <div ><span style="margin-left: 9px;"></span></div>
    <div >
      <select name="pos_table_id">
        <option value=""></option>
        <option value="1" id="22" data-order-id="22">T1</option>
        <option value="2" id="22" data-order-id="22">T2</option>
        <option value="3" id="22" data-order-id="22">T3</option>
        <option value="4" id="22" data-order-id="22">T4</option>
        <option value="5" id="22" data-order-id="22">T5</option>
        <option value="6" id="22" data-order-id="22">T6</option>
        <option value="7" id="22" data-order-id="22">T7</option>
        <option value="8" id="22" data-order-id="22">T8</option>
        <option value="9" id="22" data-order-id="22">T9</option>
        <option value="10" id="22" data-order-id="22">T10</option>
        <option value="11" id="22" data-order-id="22">T11</option>
        <option value="12" id="22" data-order-id="22">T1</option>
        <option value="13" id="22" data-order-id="22">T2</option>
        <option value="14" id="22" data-order-id="22">T3</option>
        <option value="15" id="22" data-order-id="22">T4</option>
        <option value="16" id="22" data-order-id="22">T5</option>
        <option value="17" id="22" data-order-id="22">T6</option>
        <option value="18" id="22" data-order-id="22">T7</option>
        <option value="19" id="22" data-order-id="22">T8</option>
        <option value="20" id="22" data-order-id="22">T9</option>
        <option value="21" id="22" data-order-id="22">T10</option>
        <option value="22" id="22" data-order-id="22">T11</option>
        <option value="23" id="22" data-order-id="22">T12</option>
      </select>
    </div>
    <div ><button  style="display:none;" id="22" data-id="22" data-order-id="22">Free</button></div>
  </div>
  <div >
    <div >Mitchell Admin</div>
    <div >2022-06-17 12:00:00</div>
    <div > 1 555-555-5555</div>
    <div >1</div>
    <div ><span style="margin-left: 9px;">sssss</span></div>
    <div >
      <select name="pos_table_id">
        <option value=""></option>
        <option value="1" id="23" data-order-id="23">T1</option>
        <option value="2" id="23" data-order-id="23">T2</option>
        <option value="3" id="23" data-order-id="23">T3</option>
        <option value="4" id="23" data-order-id="23">T4</option>
        <option value="5" id="23" data-order-id="23">T5</option>
        <option value="6" id="23" data-order-id="23">T6</option>
        <option value="7" id="23" data-order-id="23">T7</option>
        <option value="8" id="23" data-order-id="23">T8</option>
        <option value="9" id="23" data-order-id="23">T9</option>
        <option value="10" id="23" data-order-id="23">T10</option>
        <option value="11" id="23" data-order-id="23">T11</option>
        <option value="12" id="23" data-order-id="23">T1</option>
        <option value="13" id="23" data-order-id="23">T2</option>
        <option value="14" id="23" data-order-id="23">T3</option>
        <option value="15" id="23" data-order-id="23">T4</option>
        <option value="16" id="23" data-order-id="23">T5</option>
        <option value="17" id="23" data-order-id="23">T6</option>
        <option value="18" id="23" data-order-id="23">T7</option>
        <option value="19" id="23" data-order-id="23">T8</option>
        <option value="20" id="23" data-order-id="23">T9</option>
        <option value="21" id="23" data-order-id="23">T10</option>
        <option value="22" id="23" data-order-id="23">T11</option>
        <option value="23" id="23" data-order-id="23">T12</option>
      </select>
    </div>
    <div ><button  style="display:none;" id="23" data-id="23" data-order-id="23">Free</button></div>
  </div>
  <div >
    <div >Mitchell Admin</div>
    <div >2022-05-30 12:45:00</div>
    <div >[email protected]</div>
    <div >1</div>
    <div ><span style="margin-left: 9px;">s</span></div>
    <div >
      <select name="pos_table_id">
        <option value=""></option>
        <option value="1" id="33" data-order-id="33">T1</option>
        <option value="2" id="33" data-order-id="33">T2</option>
        <option value="3" id="33" data-order-id="33">T3</option>
        <option value="4" id="33" data-order-id="33">T4</option>
        <option value="5" id="33" data-order-id="33">T5</option>
        <option value="6" id="33" data-order-id="33">T6</option>
        <option value="7" id="33" data-order-id="33">T7</option>
        <option value="8" id="33" data-order-id="33">T8</option>
        <option value="9" id="33" data-order-id="33">T9</option>
        <option value="10" id="33" data-order-id="33">T10</option>
        <option value="11" id="33" data-order-id="33">T11</option>
        <option value="12" id="33" data-order-id="33">T1</option>
        <option value="13" id="33" data-order-id="33">T2</option>
        <option value="14" id="33" data-order-id="33">T3</option>
        <option value="15" id="33" data-order-id="33">T4</option>
        <option value="16" id="33" data-order-id="33">T5</option>
        <option value="17" id="33" data-order-id="33">T6</option>
        <option value="18" id="33" data-order-id="33">T7</option>
        <option value="19" id="33" data-order-id="33">T8</option>
        <option value="20" id="33" data-order-id="33">T9</option>
        <option value="21" id="33" data-order-id="33">T10</option>
        <option value="22" id="33" data-order-id="33">T11</option>
        <option value="23" id="33" data-order-id="33">T12</option>
      </select>
    </div>
    <div ><button  style="display:none;" id="33" data-id="33" data-order-id="33">Free</button></div>
  </div>
  <div style="background: black;color: white;font-weight: bolder;" >
    <div ><span>Cancelled</span></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div >
    <div >Mitchell Admin</div>
    <div >2022-05-30 10:00:00</div>
    <div > 1 555-555-5555</div>
    <div >1</div>
    <div ><span style="margin-left: 9px;"></span></div>
    <div >
      <select name="pos_table_id">
        <option value=""></option>
        <option value="1" id="26" data-order-id="26">T1</option>
        <option value="2" id="26" data-order-id="26">T2</option>
        <option value="3" id="26" data-order-id="26">T3</option>
        <option value="4" id="26" data-order-id="26">T4</option>
        <option value="5" id="26" data-order-id="26">T5</option>
        <option value="6" id="26" data-order-id="26">T6</option>
        <option value="7" id="26" data-order-id="26">T7</option>
        <option value="8" id="26" data-order-id="26">T8</option>
        <option value="9" id="26" data-order-id="26">T9</option>
        <option value="10" id="26" data-order-id="26">T10</option>
        <option value="11" id="26" data-order-id="26">T11</option>
        <option value="12" id="26" data-order-id="26">T1</option>
        <option value="13" id="26" data-order-id="26">T2</option>
        <option value="14" id="26" data-order-id="26">T3</option>
        <option value="15" id="26" data-order-id="26">T4</option>
        <option value="16" id="26" data-order-id="26">T5</option>
        <option value="17" id="26" data-order-id="26">T6</option>
        <option value="18" id="26" data-order-id="26">T7</option>
        <option value="19" id="26" data-order-id="26">T8</option>
        <option value="20" id="26" data-order-id="26">T9</option>
        <option value="21" id="26" data-order-id="26">T10</option>
        <option value="22" id="26" data-order-id="26">T11</option>
        <option value="23" id="26" data-order-id="26">T12</option>
      </select>
    </div>
    <div ><button  style="display:none;" id="26" data-id="26" data-order-id="26">Free</button></div>
  </div>
</div>

Any idea? What i am missing?

CodePudding user response：

It's because $content = $header.next(); targets only first next sibling, not all of them.

I would suggest re-structure your HTML, so that header and content would be wrapped together by .pointer

$(".pointer").click(function() {
  //getting the next element
  $content = $(this).find('.content');
  //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
  $content.slideToggle(500, function() {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    $(this).find('.header-text').text(function() {
      //change text based on condition
      return $content.is(":visible") ? "Collapse" : "Expand";
    });
  });

});

.orders {
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  overflow-y: auto;
  margin-left: 0px;
}

.header-row {
  display: flex;
  flex-flow: row nowrap;
  flex: 1;
  justify-content: space-evenly;
  background: #868686;
  color: white;
}

.header {
  background: black;
  color: white;
  font-weight: bolder;
}

.pointer {
  cursor: pointer;
}

.orders .order-row {
  display: flex;
  flex-flow: row nowrap;
  flex: 1;
  justify-content: space-evenly;
}

.orders .col.start {
  justify-content: flex-start;
}

.orders .col {
  display: flex;
  flex: 1;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div >
  <div >
    <div >Name</div>
    <div >Date/Time</div>
    <div >Phone</div>
    <div >PAX</div>
    <div >Description</div>
    <div >Table</div>
    <div ></div>
  </div>
  <div >
    <div >
      <div >
        <div ><span >New</span></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
      </div>
    </div>
    <div >
      <div >
        <div >Mitchell Admin</div>
        <div >2022-05-30 10:00:00</div>
        <div > 1 555-555-5555</div>
        <div >1</div>
        <div ><span style="margin-left: 9px;"></span></div>
        <div ></div>
        <div ></div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <div ><span >Confirm</span></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
      </div>
    </div>
    <div >
      <div >
        <div >Mitchell Admin</div>
        <div >2022-06-17 12:00:00</div>
        <div > 1 555-555-5555</div>
        <div >1</div>
        <div ><span style="margin-left: 9px;"></span></div>
        <div ></div>
        <div ></div>
      </div>
      <div >
        <div >Mitchell Admin</div>
        <div >2022-05-30 10:00:00</div>
        <div > 1 555-555-5555</div>
        <div >1</div>
        <div ><span style="margin-left: 9px;"></span></div>
        <div ></div>
        <div ></div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

It's because you've assigned the .pointer class to each of the child rows in each group. When you click on one of the black rows, the code looks for the next element with the .pointer class - in your case, this is the first content row within that group - and hides it.

As @justinas has already said, you should wrap the content for each group in a container (e.g. a <div>), apply the .pointer class only to the header rows (the black rows) and in your click event handler for the header rows find the container and hide it.