"Tabs" Accordion Display on Mobile

[MountainTravelerParticipant]

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!

[wensolutionsKeymaster]

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!

[MountainTravelerParticipant]

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!

[wensolutionsKeymaster]

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!

[MountainTravelerParticipant]

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!

[Support TeamKeymaster]

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.

[MountainTravelerParticipant]

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?

[wensolutionsKeymaster]

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!

[MountainTravelerParticipant]

Hey @support:

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

Other thoughts?

• This reply was modified 3 days, 16 hours ago by  MountainTraveler.

[Support TeamKeymaster]

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!

[MountainTravelerParticipant]

Hey @support:

Yes, that last snippet was it!!!

Thanks so much as usual for the great support. 🙂

Have a great day!

[Support TeamKeymaster]

Hello

Glad that the snippet worked.

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

Best Regards!

[Author]

Posts