"Tabs" Accordion Display on Mobile

Homepage Forums WP Travel "Tabs" Accordion Display on Mobile

Tagged: ,

This topic contains 19 replies, has 3 voices, and was last updated by  Support Team 3 months ago.

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #18783

    MountainTraveler
    Participant

    Hey Support:

    On mobile devices, the Tabs accordion open on the first Tab. Can we disable this open accordion on mobile, so that the user can see the full menu of Tabs?

    On mobile devices, the data in the Tabs is such that users may not know to scroll until the finish of the open Tab to discover the other Tabs with trip information. On desktop, this is clear because Tabs are horizontal, whereas in mobile they are vertical.

    Please advise and thanks!

    #18792

    wensolutions
    Keymaster

    Hello

    For the tab format to remain close on the given media screen, please add the below given code in a new js file tabs-custom-format.js in the child theme :

    jQuery( document ).ready(function($){
            if (window.innerWidth <= 768 ){
               $('.resp-tab-content').css('display', 'none')
            }
    });

    Also, please make sure that the newly created script file is also en-queued in the theme file as well. Please add the below given snippet in the enqueue function of the child theme functions.php.

    wp_enqueue_script( 'child-style',get_stylesheet_directory_uri() . '/tabs-custom-format.js',array('jquery'));

    Hope this helps.

    Feel free to reach for for any further query/confusion.

    Regards!

    #18802

    MountainTraveler
    Participant

    Hey Support:

    Super quick follow up on your part, and super thanks for that!

    To confirm before I deploy, this is what I have done:

    In the child theme package, the file pathway I created mirrors that of the parent theme: assets > js > tabs-custom-format.js

    Sound correct to you?

    Thanks again!

    #18804

    wensolutions
    Keymaster

    Hello

    Yes the path is correct however, do not miss out to en-queue the file name inside the functions.php enqueue function.

    If you face any issue with the snippet, feel free to write back to us.

    Best Regards!

    #18805

    MountainTraveler
    Participant

    Hey!

    Yep, I forgot to mention that I added the enqueue to the child theme’s functions.php file.

    Your team consistently offers fantastic support. Keep it up, and thanks so much for your timely follow ups!

    #18806

    Support Team
    Keymaster

    Hello,

    It’s always a pleasure helping you guys.

    Do not hesitate to post if you have any issues further.

    Also, we would really appreciate if you could help us by rating our plugin by following the link below:

    https://wordpress.org/support/plugin/wp-travel/reviews/

    Thank you.

    #18814

    MountainTraveler
    Participant

    Hey Support:

    Your support has definitely earned a review. I will would be happy to offer one. 🙂

    Also, I my implementation seems to be off, so if I can quickly trouble-shoot, that would be great.

    I ditched the Child Theme because it wasn’t importing all of my customizer CSS and content without re-building the site. So I am testing the above on the parent theme: Travel Base Pro (yep, I understand it will be over-written when a theme update is released. I will address the child theme later).

    1. functions.php file. I added the enqueue script to the following function, where all the other scripts call home:

    function travel_base_pro_scripts() { 
    wp_enqueue_script( 'travel-base-pro-style',get_stylesheet_directory_uri() . '/assets/js/tabs-custom-format',array('jquery')); 
    } 

    Note above I changed the child-style to travel-base-pro-style and adjusted the directory to include /assets/js/ so that the file pathway would be correct.

    I of course uploaded the tabs-custom-format.js file to assets > js folder

    This did not work. Seemed like a reasonable experiment though!

    Any thoughts here?

    #18817

    wensolutions
    Keymaster

    Hello

    If you are willing to change the parent theme file itself, please add the below given code snippet inside the enqueue function :

    wp_enqueue_script( 'tabs-custom-format',get_template_directory_uri() . '/assets/js/tabs-custom-format' . travel_base_pro_min() . '.js',array('jquery'), '', true);

    Please note that the code should be placed properly inside the travel_base_pro_scripts() function.

    Also, thank you again for your kind words. We would love to see your review as it motivates us to do better everyday.

    Hope this helps

    Feel free to reach us for any further query/confusion.

    Regards!

    #19003

    MountainTraveler
    Participant

    Hey @support:

    Thanks again for the follow up. I incorporated the above snippet, but this didn’t do the trick.

    Other thoughts?

    #19035

    Support Team
    Keymaster

    Hello

    We apologize for the inconvenience.

    Please add the below given code snippet inside the enqueue function :

    wp_enqueue_script( 'tabs-custom-format',get_template_directory_uri() . '/assets/js/tabs-custom-format.js',array('jquery'), '', true);

    If the changes are still not visible with the snippet, we will have to inspect your setting precisely.For that we will be needing your login credentials. However, Kindly let us know if this snippet works.

    Regards!

    #19046

    MountainTraveler
    Participant

    Hey @support:

    Yes, that last snippet was it!!!

    Thanks so much as usual for the great support. 🙂

    Have a great day!

    #19049

    Support Team
    Keymaster

    Hello

    Glad that the snippet worked.

    Feel free to reach us for any further query/confusion.

    Best Regards!

    #19364

    MountainTraveler
    Participant

    Hey @support:

    Revisiting this thread! 😉

    There seems to be a peculiar bug. The snippet, as mentioned above, does close the Tabs accordion on mobile. This was the solution we were looking for.

    However, the first Tab in the accordion that is now closed does not open when clicking it once. A user must click that first Tab accordion twice for it to open.

    It’s a strange bug. Seems the Tab “thinks” it is still open, even though it is visually closed. **NOTE the position of the dropdown arrow.** So clicking it once “closes” the Tab. And then clicking it again, opens it. This second click makes it visually open to the user.

    The result is that a user might think the website doesn’t function correctly if they click that first Tab before the other Tabs, and may exit the site.

    Does this make sense?

    Thoughts?

    #19401

    wensolutions
    Keymaster

    Hello

    First of all, we would like to apologize for the delay in response.

    As much as we would love to help you, for further assistance we are having quite difficulty to locate your site URL in the support threads. Can you please reconsider mentioning your site URL so that we can thoroughly get into the reported issues.

    Hope to hear from you soon.

    Regards!

    #19406

    MountainTraveler
    Participant

    Hey @support:

    No worries; your team is responding to questions from many users.

    https://trips[dot]sanooktiew[dot]com/

    Please note that this occurs only on mobile as it relates to the solution provided in this thread. 🙂

    Thanks!

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.