Button to open next dropdown jQuery - php

Question

So I am refactoring and redesigning an old application and I have multiple dropdown menus that hold data for people to enter and I would like for there to be a button that when clicked on scrolls to the next one and opens it just to make it easier to get through the form.
My html code looks like this:
<?php foreach loop that adds more dropdowns when entered in through a modal when they click new?>
<button class="tEntry-collapsible-btn tsHeader-collapsible-btn waves-effect"
id="testing"
type="button"
style="background-color: sienna !important;"></button>
<div class="tEntry-collapsible-row>
<div class="tTable-row">
//content to dropdown
</div>
</div>
....usually around 10-15 dropdown menus with the collapsible btn
<?php loop++ ?>
I added a photo for reference, the dropdown buttons are color coordinated and I added a next button at the bottom (minimal styling) and as of right now when the buttons are clicked it drops down fine but I'd also like a button that when clicked i guess focuses the next one and then opens it just for a smoother experience when working your way down the page.

Answer 1

Something like this?
Find the next dropdown and scroll to it with .scrollIntoView().
You would just call the function that drops the dropdown on the next element.
Note: not working well in the snippet... try my codepen
$(function() {
$(document).on('click', '.next', function() {
var el = $(this).closest('.dropdown');
var parent = el.closest('.wrap');
var next = el.nextAll('.dropdown').first();
// scroll like this
// parent.animate({
// scrollTop: next.position().top
// }, 1000);
// or like this; I prefer this one
next[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
});
});
.wrap {
height: 200px;
overflow-y: scroll;
}
.something {
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="dropdown">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<button class="next">next</button>
</div>
<div class="something"></div>
<div class="dropdown">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<button class="next">next</button>
</div>
</div>