Collapse Product Details Tab

Currently I have the Details accordion on my product page that is expanded by default on mobile. I would like it to be collapse by default like the other accordions. How would I go about this?

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile/Tablet:

.woodmart-accordion-title {
    cursor:default;
	pointer-events: none;
}

.tabs-layout-tabs .woodmart-tab-wrapper .wc-tab {
    display: block!important;
}
.tabs-layout-tabs .woodmart-scroll .woodmart-scroll-content {
	max-height: 100%!important;
}

Best Regards

That didn’t work. Now all 3 of my tabs are opened by default and they don’t even collapse when I touch them 🙁

It gives me two warnings on lines 7 & 10 “Use of !important”

Hello,

Do you want all of them to be always closed? I cannot figure out what is your purpose. I provided the code to have all the tabs open.

Please clarify

Best Regards

I would like the tabs on the product page to be closed by default on mobile. The user should click to expand if he wants to read more.

Currently the default is that the first one is opened and the others are closed

Hello,

Add the snippet to the Custom JS section in Theme Settings:

setTimeout(function() {
	var $tab = jQuery('.woodmart-tab-wrapper').find('a.active');
		$tab.siblings('.wc-tab').hide();
	  $tab.removeClass('active');
}, 10);

Best Regards

This did not work. Please see the attached screenshots. As you can see in the current view, the first tab called “Description” is opened and all the content is there. I can close it if I click on it, but I want it to be closed automatically like in the desired screenshot.
The user should click to read more. I don’t want all that expanded by default.
This is only for mobile of course. On desktop I do not have an accordion, they are tabs.

Attachments:

You must be logged in to view attached files.

Hello,

You need to add the code to the Theme Settings > Custom JS > on document ready http://prntscr.com/oh7hzb

Remove it from CSS and insert in JS.

Best Regards

Ah indeed, that was my mistake.
One more issue though: now the tabs on desktop are closed by default also (see attached). Can we make this code apply to tablet and mobile only?

Attachments:

You must be logged in to view attached files.

Try to replace the code with the following one

setTimeout(function() {
      if( $(window).width() > 1024 ) return;
	var $tab = jQuery('.woodmart-tab-wrapper').find('a.active');
		$tab.siblings('.wc-tab').hide();
	  $tab.removeClass('active');
}, 10);

Regards

This didn’t work either, back to square one as if there were no JS code. The tab is opened correctly on desktop but the description accordion is also opened.

Hello,

Could you please disable all plugins that are not related to our theme and provide us your admin access so we can check it? Also, send us a link where you have added the code.

Thank you in advance

see private

Try to replace the code with the following one

setTimeout(function() {
      if( jQuery(window).width() > 1024 ) return;
	var $tab = jQuery('.woodmart-tab-wrapper').find('a.active');
		$tab.siblings('.wc-tab').hide();
	  $tab.removeClass('active');
}, 10);

Success! Thank you

Great, you are welcome!

[Author]

Posts