cubecolour

This would require the tabs to use a custom set of styles. There are a couple of options available to achieve this:

1. Uncheck the option to include the default stylesheet, and copy the css rules from the tabby.css stylesheet in the plugin into your child theme’s stylesheet or the additional css section of the WordPress customizer, then edit the css as required there.

2. Alternatively use the optional Tabby responsive tabs customiser add-on to customise the tab design without needing to do any code editing.

It looks like the tabby.css stylesheet is not loading.

In the WordPress admin go to settings -> tabby

Is the ‘Include the default tabby stylesheet’ checkbox checked? If not, select it and click [save changes] to include the stylesheet.

Try using the WordPress Health Check & Troubleshooting plugin to investigate whether another plugin is causing a conflict which prevents the tabby javascript from working.

Editing the tabby.css stylesheet is not recommended as the stylesheet will always be overwritten whenever the plugin is updated – wiping out any changes made.

The add-on to make the accordion closed on page load is a fairly simple plugin but it does involve adding some css and javascript to do it properly and in a way that does not get wiped out when the plugin is updated.

I do provide free support here on the forum for anyone using the plugin as it was designed, but customisation is not within the scope of the free support I am able to provide.

To ensure that any changes made will still be in place after the plugin is updated, the solution should not involve directly editing any of the plugin files.

I would recommend to first go to the new tabby settings page in your WordPress admin at settings-> tabby and uncheck the ‘Include the default tabby stylesheet’ option. This will prevent the default tabby stylesheet from loading.

Then you would then create a simple plugin with a customized copy of the tabby.css stylesheet enqueue using the cc_tabby hook. The stylesheet can simply have the dimension parameter in the media queries changed to a very large value to force the tabs to always display as an accordion, or you could remove the non-accordion styles completely so that only the accordion styles are used.

The best way to make the all content sections of the accordion closed on initial page load is to use the ‘tabby load accordion closed’ add-on which is described on the add-ons section of the tabby settings page.

If you require a custom site-specific add-on combining the customized styles as described plus the ‘load accordion closed’ functionality this can be created for your site – see the ‘Custom styles or functionality’ section on the settings page for details of this service.

The tabs look pretty much how I would expect a set of tabs using a stock installation of tabby responsive tabs to look. Given the number of tabs on the page and the length of the tab titles, I am guessing that the way the tabs display has been customized somehow.

Had the version of the plugin’s tabby.css stylesheet on the site been previously edited to change the appearance of the tabs?

If that is the case, updating the plugin has overwritten those changes, (this will occur if any files of any plugin are edited and that plugin is updated) so you will need to get your edited version from a backup and make the stylesheet load from the theme or a custom plugin to prevent the same issue reocurring.

If this does not sound like it applies, can you describe how you were expecting the tabs to appear please?

The tabby.js script has to see the content to be turned into tabs before it can transform it into tabs. If the script runs before the html exists, we will not see any tabs, just headings and content.

This is the way the script that this plugin was created around was built. To change this it would require an extensive rebuild of the plugin as elements added to the html by javascript would need to be added by the shortcode in PHP, but also preseve backward compatibility.

If the other plugin is working better for your use-case I think its best to continue to use that one.