Tabs not showing and deactivated plugins but not working

I can’t see your site so I am unable to look for clues in the page source.

Which theme are you using?

Does your theme’s footer.php (or possibly another theme file) contain the wp-footer hook?

This would normally appear in the code as wp_footer() just before the closing </body> tag, and needs to be present in the theme for the tabby.js javascript file and scripts used by other plugins to be loaded.

Are you trying to include the tabs on the ‘our story’ page? http://fullfillco.com/?page_id=9

Did you copy & paste the shortcodes into your page content and then edit them or did you type them manually? If you copied them form an example page, try deleting & retyping them.

Remember to leave a line before and after each shortcode, eg:

[tabby title="Tab One"]

content goes here

[tabby title="Tab Two"]

content goes here

[tabby title="Tab Three"]

content goes here

[tabbyending]

It looks like the tabgroup is included within a level two heading as there appears to be an open <h2> tag before the tabgroup which can cause problems.

I don’t see the tabby.js script included in your footer. Have you edited the footer.php of your child theme? If so ensure the wp_footer hook has not been deleted.

That’s looking better – its *almost working* now

The script seems to be loading OK now so there’s no need to do anything with the footer.

I can see that the first tab seems to have loaded, however as you copied & pasted the shortcodes, it appears that some of the the quote characters became incorrectly converted somewhere in the cut & paste process.

Try deleting each shortcode and retyping it manually.

It looks like the shortcodes aren’t formed properly.

What tabby shortcodes have you used on the page? Can you copy the exact code into your forum reply – use the code buttons on the forum to add backticks before & after so it looks something like this:

[tabby title = "First"]

[tabby title = "Second"]

[tabby title = "Third"]

[tabbyending]

The spaces before & after the = are not necessary but wouldn’t make any difference.

The shortcodes above look Ok and on viewing the source of the page on your site I can see that the scripts are loaded correctly and the first tab is ‘kind of’ appearing.

I’m wondering whether there might be any html elements in the page content which might interfering with how the tabs display – specifically non-matched opening/closing tags.

I notice in the page source that the markup presented to the browser looks like this:

<h2><div class="responsive-tabs-wrapper"><div class="responsive-tabs responsive-tabs--enabled"><ul role="tablist" class="responsive-tabs__list"><li tabindex="0" role="tab" aria-controls="tablist1-panel1" id="tablist1-tab1" class="responsive-tabs__list__item responsive-tabs__list__item--active">Craft</li></ul>
<h2 tabindex="0" class="tabtitle responsive-tabs__heading responsive-tabs__heading--active">Craft</h2>
<div id="tablist1-panel1" aria-labelledby="tablist1-tab1" role="tabpanel" aria-hidden="false" class="tabcontent responsive-tabs__panel responsive-tabs__panel--active">
</div></div></div></h2>

If I add line breaks and tabs & make it more readable to show how it is nested it looks like this:

<h2>
	<div class="responsive-tabs-wrapper">
		<div class="responsive-tabs responsive-tabs--enabled">
			<ul class="responsive-tabs__list">
				<li id="tablist1-tab1"">
					Craft
				</li>
			</ul>
			<h2 class="tabtitle">
				Craft
			</h2>
			<div id="tablist1-panel1">
			</div>
		</div>
	</div>
</h2>

I suspect that the invalidly nested <h2> tags may have something to do with the problem, so we need to work out how they are getting there.

Can you go into your page editor for that page and select the text editor mode (as opposed to the visual editor), select all of the text, copy it to your clipboard and paste it into a reply on the forum.

Be sure to press the [code] button before and after pasting in the markup to add the 'code' backticks so that it is shown like the example code I have pasted in my forum posts (ie with a darker background & monospaced typeface)

Can you try taking out the <h2> tags as I think they may be causing the issue

eg for the first shortcode, instead of:
<h2>[tabby title="Craft"]</h2>

use:
[tabby title="Craft"]

and so on for the others.

The shortcode automatically adds in h2 tags to make the tab titles, so these should inherit your h2 styles, but having h2 tags nested within h2 tags is invalid markup.

Looking good!

If you view the page source in the browser you should be able to see the Tab titles are now in h2 tags like this:

<h2 class="tabtitle">Craft</h2>
<div class="tabcontent">
content here...
</div>

The titles should inherit the font family style of the h2, but the size, padding etc will be overidden by the tabby styles.

Now you have the tab shortcodes working with the default styles, if you do choose to later get the optional customiser it should just work without any hassle & you’ll find that it is designed to be as easy to use as possible.

I’m very pleased that you like the plugin. If you would like to leave a review, you can do so at: https://wordpress.org/support/view/plugin-reviews/tabby-responsive-tabs.