My bizarro click and hide needs help

I’ll try my best to explain this properly. I have an industry bar on my page that displays the corresponding industry below when clicked. However on mobile, the industry displays under all the industries and you have to scroll down to view it.

So what I did was copied my industry bar and made it viewable in mobile only. I then put divs in between the “industryicons” or buttons. I put all the corresponding information in here and now when you click it, it shows directly under the related industry. This may not be the exact way to do this (as I was going to originally build layers of sections to accomplish this) but I actually really like the effect of the gradient moving now.

My problem is that when a user clicks on education, it opens, but when they click on banking without closing education, education closes (which is what I want, but now banking is sent up and you are viewing only the bottom portion of banking. How can I fix this?

https://webflow.com/design/nuvertise?preview=b9e9933bf4ca0eec81120ea0f67dd4a1