"Tabs" Accordion Display on Mobile

[Sakuna]

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!

[wensolutions]

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!

[Sakuna]

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!

[wensolutions]

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!

[Sakuna]

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 Team]

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.

[Sakuna]

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?

[wensolutions]

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!

[Sakuna]

Hey @support:

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

Other thoughts?

[Support Team]

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!

[Sakuna]

Hey @support:

Yes, that last snippet was it!!!

Thanks so much as usual for the great support. 🙂

Have a great day!

[Support Team]

Hello

Glad that the snippet worked.

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

Best Regards!

[Sakuna]

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?

[wensolutions]

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!

[Sakuna]

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!

[Author]

Posts