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.
<div class="earningsTbl u-full-width">
<div class="dayhead row">
<div class="six columns">Wednesday, Nov 16 (11 Calls)</div>
<div class="rte six columns">Day Total $283.00</div>
<div class="daytrip row" style="display: block;">
<div class="one column"> </div>
<div class="six columns">Trip ID: 126</div>
<div class="rte five columns">Trip Total $12.00 ↠</div>
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.