Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #1233986

    Hi!
    I need the dropdown of the first tab to be closed by default in the mobile version.

    It is like accordion logic but in tabs.

    Attached images:
    http://clientes.maihuechile.cl/wp-content/uploads/2020/07/enfold_1.jpg
    http://clientes.maihuechile.cl/wp-content/uploads/2020/07/enfold_2.jpg
    Thank you!

    #1234166

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

    #1234182

    Thnaks!
    On mobile

    #1234330

    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 )

    #1234333

    Demo Page: https://webers-testseite.de/pureinstall/tabs-on-mobile/
    (this is for the class on body – you decide when the switch is set)

    to child-theme functions.php

    function add_class_for_tab_switch(){
    ?>
    <script type="text/javascript">
    (function($) {
    	function my_tab_switch() {
    		setTimeout( function() {
    	        if ($(window).width() <= 767) {
    			  $("#top").addClass("tab_switch");
    			} 
    			else {
    			  $("#top").removeClass("tab_switch");
    			}
            }, 150)	
        }
    	$(window).on('load resize', function() {
    		my_tab_switch();
    	});
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'add_class_for_tab_switch');

    after that you can use these classes on quick css

    /***** Settings for closed Tabcontainers on tab switch setting ************/
    .js_active .tab_switch .tabcontainer.mobile-tabs-closed .active_tab_content {
    	display: none;
    	visibility: hidden;
    }
    .responsive #top .main_color .tabcontainer.mobile-tabs-closed .tab_content.mobile-tab {
    	display: block;
    	visibility: visible;
    }
    .responsive #top.tab_switch .main_color .tabcontainer.mobile-tabs-closed .active_tab {
    	background-color: unset;
    	color: inherit;
    }
    .js_active #top.tab_switch .tabcontainer.mobile-tabs-closed .active_tab {
    	font-weight: normal;
    }
    #top.tab_switch .main_color .tabcontainer.mobile-tabs-closed .tab.active_tab:hover {
    	color: #666666;
    }
    #1234335

    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.

    #1234339

    If you want to change the switch point to a diffent one you had to adjust the value in the script aboveand to have some additional quick css entries:

    /****** Settings to change the tab switch point if it is different to 768px *********/
    @media only screen and (max-width: 989px) {
    	.responsive .tabcontainer.mobile-tabs-closed .tab_content {
    	    border-bottom: none;
    	    padding: 15px 30px;
    	    clear: both;
    	}
    	.responsive .tabcontainer.mobile-tabs-closed .tab_content, .responsive .tabcontainer .tab {
    	    width: 100%;
    	    max-width: 100%;
    	    border-left: none;
    	    border-right: 0;
    	    left: 0;
    	    top: 0;
    	    min-height: 0!important;
    	}
    	.responsive .tabcontainer.mobile-tabs-closed {
    	    border-width: 1px;
    	    border-style: solid;
    	    border-top: none;
    	    overflow: hidden;
    	}
    	.responsive .tabcontainer.mobile-tabs-closed .tab_titles {
    	    display: none;
    	}
    	.responsive .tabcontainer.top_tab.mobile-tabs-closed .tab.fullsize-tab {
    	    margin-bottom: 0px;
    	}
    	.responsive .tabcontainer.mobile-tabs-closed .tab.fullsize-tab {
    	    display: block;
    	    margin-bottom: -1px;
    	}
    }

    you can see now on the testpage that i have switched to 989px – to illustrate the effect and settings better.
    As long as you do not open a tab on “mobile” – you can resize the screen ( or tilt the device )

    #1234391

    Amazing!
    I just saw the demo and it’s great …
    I’m going to review everything in detail and tell you.
    Thank you very much!

    Could you check for my other request please?
    Thank!

    #1234409

    Thanks – but i’m Participant as you – so the other request has some infos in private content – which i do not see.

    #1234414

    Wow
    Thank you very much

    #1234415

    Sorry, now if the complete information:

    Hi!
    I need to build a couple of tabs in the header, just like this example.
    Is it possible to do it in any way?
    There is a version for desktop and mobile

    Thank you very much!
    This is the example of the tabs in the header

    #1234438

    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

    #1234439

    Guenni007
    How do I give it that style? I don’t remember seeing anything to do it

    Thanks!

    #1234496

    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.

    #1234511
    #1234812

    Guenni007
    Thanks!!

    I’m going to check everything.
    Very grateful again

    #1235276

    Hi mtmundarain,

    Thanks for the update, please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

    #1235512

    Very grateful to everyone, it is good to know them from the other side.

    As you ask:
    How could i make the width of the tabs the same width as the element?
    Thansk!
    https://staging4.breadandcheese.cl/sin-titulo-5/

    #1236203

    Hi,
    Sorry for the late reply, and thanks for the screenshot, it looks like you are using 4 tabs, do you plan on adding more tabs?
    For 4 tabs, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top .tabcontainer .tab {
        width: 25% !important;
    }

    I recommend adding a custom class to your Tabs element in the advanced options under developer settings, and then adjust the css like this:

    #top .tabcontainer.custom-class .tab {
        width: 25% !important;
    }

    So the css will only effect the Tabs you wish.
    After applying the css please clear your browser cache and check.

    Best regards,
    Mike

Viewing 19 posts - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.