jQuery not working for tabs shortcode [closed]

Question

See reference URL - http://prothemeus.com/demo/fact/shortcodes/

If you take a look at the tabs at the bottom of this page, whenever I click on each tab it doesn't show the content underneath.

I've figured out it's a jQuery problem but jQuery isn't my strong suit...

Any ideas?

Answer 1

Take a look at the jQuery UI documentation on tabs here.

If you view the source for the demo you'll see that the entire tab content is wrapped in a div. Your source/HTML tabs are not wrapped in a div per the documentation.

Answer 2

Well, a number of things appear to be going wrong here. For starters, your content <li>s have IDs of title-1, title-2 title-3 and -title-4 (note the dash prepended to the latter).

Clicking on the tabs, my console displays an error for each to the effect of,

Uncaught Error: Syntax error, unrecognized expression: http://prothemeus.com/demo/fact/shortcodes/#title-2Tab 

The first thing that comes to mind here is that your anchors shouldn't be using absolute URLs. Change them from http://prothemeus.com/demo/fact/shortcodes/#title-2 to simply #title-2.

I am not entirely sure why the word "Tab" gets appended to the end of the URL returned in the error message, but in searching to figure out why I dug around a little to look for where you are invoking .tabs() but I cannot locate it within your source. As @Stephen has pointed out, the .tabs() function should be invoked upon an element acting as a container for your tabs and content slides, which appears to be absent from your page.

It is also worth noting that you are using the production distribution of jQuery and, being minified as it is, your scripts would be easier to debug using the development distro.

Finally, this question has no relevance to Wordpress save for the fact that Wordpress is serving the site, and in fact this question is specific to the jQuery UI. You may find more accommodating or appropriate responses tagged as jQuery at either StackOverflow or Programmers.