Open first group, then the next..slideToggle()

Open first group, then the next..slideToggle()

I'm trying to show or collapse everything from dayhead to the next dayhead while leaving daytrip_nfo collapsed until clicking on one of the daytrip headers. Then if another daytrip is clicked on, collapse the first and show this (current one clicked on).

Here's my html.

  2. <div class="earningsTbl u-full-width">

  4.   <div class="dayhead row">
  5.     <div class="six columns">Wednesday, Nov 16 (11 Calls)</div>
  6.     <div class="rte six columns">Day Total $283.00</div>
  7.   </div>
  8.   <div class="daytrip row" style="display: block;">
  9.     <div class="one column">&nbsp;</div>
  10.     <div class="six columns">Trip ID: 126</div>
  11.     <div class="rte five columns">Trip Total $12.00 ↠</div>
  12.   </div>
  13.   <div class="daytrip_nfo row" style="display: block;">
  14.     <div class="two columns">&nbsp;</div>
  15.     <div class="four columns">StD to Jackson <br>Miles: 3.74</div>
  16.     <div class="four columns">Wait Time: 0:01:45 <br>Extra Pax/Stop: 0/0</div>
  17.   </div>
  18.   <div class="daytrip row" style="display: block;">
  19.     <div class="one column">&nbsp;</div>
  20.     <div class="six columns">Trip ID: 127</div>
  21.     <div class="rte five columns">Trip Total $20.00 ↠</div>
  22.   </div>
  23.   <div class="daytrip_nfo row" style="display: block;">
  24.     <div class="two columns">&nbsp;</div>
  25.     <div class="four columns">Ridgeland to Ridgeland <br>Miles: 3.39</div>
  26.     <div class="four columns">Wait Time: 0:01:59 <br>Extra Pax/Stop: 0/0</div>
  27.   </div>

  29.   <div class="dayhead row">
  30.     <div class="six columns">Thursday, Nov 17 (12 Calls)</div>
  31.     <div class="rte six columns">Day Total $359.70</div>
  32.   </div>
  33.   <div class="daytrip row">
  34.     <div class="one column">&nbsp;</div>
  35.     <div class="six columns">Trip ID: 137</div>
  36.     <div class="rte five columns">Trip Total $20.00 ↠</div>
  37.   </div>
  38.   <div class="daytrip_nfo row">
  39.     <div class="two columns">&nbsp;</div>
  40.     <div class="four columns">Flowood to Jackson <br>Miles: 8.25</div>
  41.     <div class="four columns">Wait Time: 0:02:00 <br>Extra Pax/Stop: 0/0</div>
  42.   </div>
  43.   <div class="daytrip row">
  44.     <div class="one column">&nbsp;</div>
  45.     <div class="six columns">Trip ID: 138</div>
  46.     <div class="rte five columns">Trip Total $128.00 ↠</div>
  47.   </div>
  48.   <div class="daytrip_nfo row">
  49.     <div class="two columns">&nbsp;</div>
  50.     <div class="four columns">Baptist to Forest <br>Miles: 49.13</div>
  51.     <div class="four columns">Wait Time: 0:25:00 <br>Extra Pax/Stop: 0/0</div>
  52.   </div>

  54. </div>
Here is the jquery code I'm struggling with.

  2. $('.dayhead').on('click', this, function() {
  3.       var rowsCollapse = $(this).nextUntil('.dayhead');
  4.       $(rowsCollapse).slideToggle();
  5. });
  6. $('.daytrip').on('click', this, function() {
  7.       var rowsCollapse = $(this).nextUntil('.daytrip');
  8.       $(rowsCollapse).slideToggle();
  9. });
The current document ready state starts correctly with all divs between each element with .dayhead collapsed.

When clicking on an element with the .dayhead class, it does toggle the elements' display until the next element with the .dayhead class, but also all elements with .daytrip_nfo. It glitches when you click on one of the elements with the .daytrip class then clicking on the previous element with .dayhead class.

I hope I explained that correctly.

I've tried every iteration of the code I can think of but still not nailing it.

Any help would be appreciated. Thanks in advance.