CLOSED TABS ON MOBIL

what exactly do you like to obtain? the behaviour on mobile devices or on narrow screen width? The first one is easier to reach.

Those for whom it is too much text to get a solution may skip this answer. ;)

When I began to deal with the subject, I encountered various obstacles.
In general, there is no easy solution to these. And my first attempt to redefine the two classes responsible for the appearance ( active_tab and active_tab_container ) only by css and the class set to html if it is a mobile device (avia_mobile) would not make sense. Because then all tablets – even the Ipad Pro with its 12.9 inch size – would initially display the closed tabs.

So when the page is loaded, it should be decided whether the tabs are open or not. When tilting the mobile device, however, it should be decided again whether the tabs are open or not.
For example the Iphone XS: 375×812
i.e. normally in landscape mode the tabs would be in normal view, in portrait mode the tabs would be arranged below each other.

So I thought I would link this decision to the presence of the Hamburg Icon. Unfortunately the default setting of the tabs causes me some problems, because they usually change their appearance when resized to 768px. So there would be a discrepancy in the setting depending on the burger menu if it changes already at 990px. – But there is a Quick CSS solution.
But there are participants here who always show the burger, so this would not be the solution.

So I decided to create a class that I can fall back to if the screen width falls below a certain value without changing the behavior of the above mentioned classes ( active_tab and active_tab_container ).
With this first script I set a class to body, which offers me a switch with which I can make this decision ( tab_switch ).

Additionally I give the Tabs ALB element a custom class to decide if I want the effect or not. ( mobile-tabs-closed )

However, these settings alone would have the effect that the tabs can no longer be opened in the “mobile” case. Since the switch case has removed this exactly. Therefore a click solution is needed to correct this.

you see above in the css code there is an additional class i set for that decision ( mobile-tab)
this to child-theme functions.php

function mobile_tabs_open_onclick(){
?>
<script type="text/javascript">
(function($) {
	$('.responsive #top .tabcontainer.mobile-tabs-closed .av_tab_section .tab').click(function() {
		$(this).next('.tab_content').toggleClass('mobile-tab');
		$(this).closest('.av_tab_section').siblings().find('.tab_content').removeClass('mobile-tab');
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'mobile_tabs_open_onclick');

If the mods see a much simpler solution, don’t be afraid to announce it.

Well you can use the top-header on that :
Enfold Child – Header – Extra Elements Tab and : Header Secondary Menu
you have to define one menu as: Enfold (Child) Secondary Menu ( don’t know if you are using a child-theme)
to style them as “tabs” like in your example page should be possible

if you are satisfied with : https://webers-testseite.de/impressum/
( i just did it for that page ) then i will post the css you need.