Three live tabs but only one shows content

It looks like the content for the news & fundraising tabs are both present in the page source but are not being shown, possibly due to some CSS rules being overridden.

The most likely time I would expect the change to have occurred is after a new plugin was installed or after a plugin had been updated.

An update of Tabby Responsive Tabs may have unexpected CSS issues if the recommended methods to customise the plugin’s CSS – as outlined in the plugin FAQ – had not been followed and instead the plugin’s default stylesheet is still loaded, with additional rules to override these are included in the child theme.

if you have a development version of the site which is an exact clone of the live site it will be best to troubleshoot using that, otherwise you can troubleshoot on the live site after making a full file and database backup. First investigate whether there is an issue with another plugin interfering with the output by temporarily deactivating all other plugins and view the page after refreshing the browser. If the tab content appears at that point, this will indicate a problem caused by another plugin. If this is the case, activate the plugins one-by-one and then refresh & check the page again each time until the issue occurs again to identify which one needs further investigation.

Hi

I’ve disabled each plugin one at a time and saw no change in the tabby functionality.

I did a few tests with the CSS too:
1 – I replaced my modified Tabby CSS file the original that came with the download > Saw no change
2 – Copied the original Tabby CSS into my child themes stylesheet and disabled the Tabby CSS file > Saw no change
3 – Deleted my themes stylesheet and kept the original Tabby CSS > Saw no change
4 – Now my custom Tabby CSS file is live along with the themes stylesheet and it still will not work.

I’m not sure where to go from here.

regards
Heinrich

It might be useful to establish whether the issue is due to something conflicting with the plugin or specifically due to the code on that particular page.

Are you using tabby responsive tabs shortcodes on any other pages on the site?

To test this create a new page, but do not add it to the menu. On this test page add a set of tabby shortcodes with some dummy text content and post a link to that page here on the forum.

Inspecting how the tabs appear on that test page may give some clues as to where the problem is with the hardcoded tabs.

Hi

Interestingly the new test page works!

https://thematthewrussofoundation.org.uk/tabby-test

So from this I can only guess that there is an issue with the front page template but why it only stopped working recently is baffling.

Thank you for doing that test – this does suggest that you need to look closer at the code that was added to your template.

The next test I would suggest would be to go back to the original page, make a backup of the template, and then edit the template to replace the code that builds each tab’s content with a small amount of plain text whilst keeping the code to output the tabbby shortcodes in place. Then, if the tabs work like that, add back the original code for each tab’s content — one at a time to see whether you need to focus on troubleshooting a specific part.

Hi,

I did what you suggested and the outcome wasn’t what I was hoping for. I’m still no further.

Screen grabs attached for you to see what was tested.

https://drive.google.com/file/d/0By0s5NOP9Gpaa2hYUTNjZ1RsQm8/edit?usp=sharing

https://drive.google.com/file/d/0By0s5NOP9GpabE9WeGFuQXBmMTA/edit?usp=sharing

https://drive.google.com/file/d/0By0s5NOP9GpacWNxdjg3UFFDb1U/edit?usp=sharing

https://drive.google.com/file/d/0By0s5NOP9Gpaeng2VkFOTGVrYkk/edit?usp=sharing

It looks like there’s something wrong with the formatting of the code you have added to the template rather than a problem caused by the tabs.

Have you checked that your template code works as it should without the tabs?

To confirm/troubleshoot this: Make a new template based on the one you are using and create a similar page using this template. When making the template, instead of using tabs, take these out of the equation and enclose each section in a div instead. Add some CSS to give each of these divs a different outline colour to help make them clear which part you’re looking at.

Then check that this page looks OK and that the template is producing valid html. Use the tools at https://validator.w3.org/ and https://jigsaw.w3.org/css-validator/ to validate the HTML & CSS

Hi,

I’ve fixed the issue with your help. After doing a second template, without the tabs, all the content appeared for each section.

I ran the second template through the validator and found what was going on! I had anchor tags which were not closed inside the code sections calling the new/event articles and they were breaking the code right after the first tab.

Thank you for your time and patience in helping me resolve this issue.

regards
Heinrich

That’s great Heinrich. I’m glad you have and fixed the issue.

If you’d like to leave a review of the plugin, you can do so at https://www.ads-software.com/support/view/plugin-reviews/tabby-responsive-tabs