Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #887791

    How can make tabs display closed on mobile devices?

    Screenshot 1 – displayed now
    https://www.dropbox.com/s/1wha597x74r4t2f/2017-12-12_102650.png?dl=0

    Screenshot 2 – need to display
    https://www.dropbox.com/s/pfprrozy330vzgo/2017-12-12_102713.png?dl=0

    #887900

    Hey sckye,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    #887939

    Hey Victoria,
    Private Content:

    #887982

    Hi sckye,

    Here are some threads to consider:
    https://kriesi.at/support/topic/all-tabs-closed-on-mobile-only/
    https://kriesi.at/support/topic/closing-an-open-tab-in-mobile/

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #888008

    Hi Victoria,

    User from this thread: https://kriesi.at/support/topic/closing-an-open-tab-in-mobile/
    Applied the solution from here: https://kriesi.at/support/topic/responsive-tab-closing/
    Tried to do the same, nothing happened.

    Private Content:

    #888716

    Hi,

    Thank you for the update.

    We modified the code in the functions.php file.

    
    // custom script
    add_action('wp_footer', 'ava_custom_script');
    function ava_custom_script(){
    ?>
    <script>
    (function($){
    	// close tab on mobile view
    	function i() {
    		$(window).load(function() {
    			var mobile = $('.responsive #top .av-main-nav .menu-item-avia-special').css('display');
    			if( mobile !== 'block' ) return;
    			$('.active_tab').removeClass('active_tab');
    			$('.active_tab_content').removeClass('active_tab_content');
    		});
    	}
    
    	i();
    })(jQuery);
    </script>
    <?php
    }

    Best regards,
    Ismael

    #888804

    Thank you! Works great!

    There were two questions:

    1. Can I specify the width of the screen somewhere? For example, everything that is 960 or less – the tabs are closed by default.

    2. Is it possible to do so:
    Click on the tab – it opened, click on the tab – did it close like in an accordion?

    #889455

    Hi,

    1.) The script will trigger if the mobile menu is visible so you can set the Main Menu > Menu Items for mobile to the second option.

    2.) I’m sorry but this will require modification that is beyond the scope of support. Please hire a freelance developer or contact our partner, Codeable.

    Best regards,
    Ismael

    #889512

    Hi,

    For some reason, the contents of the tab are no longer displayed on large screens during the first page load (until you click on the tab).
    Screenshot: https://www.dropbox.com/s/bj26pbyxsbm4icw/2017-12-16_120801.png?dl=0

    • This reply was modified 3 years, 6 months ago by  sckye.
    #889903

    Hi,

    I checked the test page again but it’s empty. Did you move the site?

    Best regards,
    Ismael

    #889932

    No, I did not move the site. Just the page looks empty – the contents of the tabs are not displayed until you click on them. I attach two screenshots. Try to go to the page again please.

    #890322

    Hi,

    No, I did not move the site. Just the page looks empty

    The page is blank, just plain white. We can’t see anything. Please check it. ( see private field )

    Best regards,
    Ismael

    #890341

    This is because Under Construction plugin is enabled. To see the page you need to be logged in on the site.

    #891465

    Hi,

    Thank you for the info.

    We modified the script a bit. It should be working now. Please remove browser cache or hard refresh before checking the page.

    Best regards,
    Ismael

    #891513

    Cache cleared, tried in three different browsers – contents of the tab are no longer displayed on large screens during the first page load until you click on the tab. After the first time clicking on the tab on subsequent reboots of the page, the address with the anchor is always opened … / # tab-id-1 so it seems that everything is fine until you look in the address bar and make sure that the address with the anchor.

    #891904

    Hi!

    My bad. I forgot to reset the tab options. It should be working now. You might notice a small delay but the script should close the tab on mobile view.

    Regards,
    Ismael

    #891979

    Hi,

    The script works fine, but unfortunately for some reason there were problems after installing the UberMenu plugin (wpmegamenu.com) – contents of the tabs are not displayed until you click on them.

    #892287

    Hi,
    The UberMenu plugin has known issues with Enfold according to the UberMenu knowledgebase: ubermenu-3 theme-integration enfold and this could be another issue. Unfortunately we are not able to accommodate every plugin.

    Best regards,
    Mike

    #892472

    Hi, Mike

    Thanks for the comment, but you are mistaken when you think that the UberMenu plug-in has some problems with the Enfold, it’s not, it works perfectly. I have some difficulties and Ismael is trying to help me. If he thinks fit, he can at any time tell me that I’m asking too much.

    #892811

    Hi,

    There is an error in JavaScript and so the JavaScript for the tabs does not work.
    The error is in the under construction plugin.

    Best regards,
    Victoria

    #892820

    Under construction plugin was removed – this did not solve the problem.

    #893132

    Hi,

    The script is not working properly because the mobile logic that we created became invalid when you installed the ubermenu plugin. We modified the script a bit. Please make sure that you’re not looking on a cached version of the page.

    Best regards,
    Ismael

    #893182

    Hi Ismael,

    Everything works great. Thank you ever so much.

    #893627

    Hi,

    Glad it is working now. Please feel free to open a new thread if you need anything else. :)

    Best regards,
    Ismael

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

The topic ‘ALB > Content Elements > Tabs: make tabs closed on mobile’ is closed to new replies.