Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Thanks in advance for any help you can offer! I am using the example posted here as a proof of concept on my website page. I am using "Use Google Libraries" to load the jQuery and jQuery-UI libraries, and I have a file called all.js that includes the jQuery from the example.

I believe I have used the code as in the example, but I'm still not able to change from one tab to another or to have content load in the div. I think this has something to do with the way I'm loading the libraries, but I'm not sure where I am going wrong. Again, I appreciate your help with this!

EDIT

HTML Code from Webpage

<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
        <li><a href="#tab3">Tab #3</a></li>
        <li><a href="#tab4">Tab #4</a></li>
    </ul>

    <div class="tab-content">
        <div id="tab1" class="tab active">
            <p>Tab #1 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
        </div>

        <div id="tab2" class="tab">
            <p>Tab #2 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>

        <div id="tab3" class="tab">
            <p>Tab #3 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
        </div>

        <div id="tab4" class="tab">
            <p>Tab #4 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>
    </div>
</div>

Page Head (Relevant Code)

<html lang="en-US" xmlns:fb="http://ogp.me/ns/fb#" xmlns:addthis="http://www.addthis.com/help/api-spec"  prefix="og: http://ogp.me/ns#">
<head>

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script type='text/javascript'>try{jQuery.noConflict();}catch(e){};</script>
<script type='text/javascript' src='http://MYSITE.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://MYSITE.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://MYSITE.com/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 3.9.1" />
<link rel='shortlink' href='http://MYSITE.com/?p=1111' />
<style type="text/css">.addtoany_subscribe img{border:0;}</style>
<style type="text/css" media="all">

<!-- BEGIN Typekit Fonts for WordPress -->
<script type="text/javascript" src="//use.typekit.net/xri2tgf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">
#content h2 {font-weight: 400; color: #7d92a1; font-size: 36px; line-height: 44px;}
#content h1 {font-weight: 400; font-size: 40px; line-height: 48px;}
#content .entry-title {font-weight: 400; font-size: 40px; line-height: 48px;}
#content p, li {font-size: 20px; line-height: 26px;}
#content ul {line-height: 30px;} 
</style>

<!-- END Typekit Fonts for WordPress -->

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="/wp-includes/js/all.js"></script>   
</head>

All.js

$(document).ready(function() {
    $('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = $(this).attr('href');

        // Show/Hide Tabs
        $('.tabs ' + currentAttrValue).show().siblings().hide();

        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});

I also tried using this as All.js based on the comments:

jQuery(document).ready(function(){
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = $(this).attr('href');

        // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

        // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});
share|improve this question
1  
Please read codex.wordpress.org/Function_Reference/… –  Wyck May 19 at 22:53
    
And please do not describe what you are doing, but show us your actual code. –  kaiser May 20 at 0:38
    
Understood! I have posted the code. Thanks for any help you can offer! @Wyck, I appreciate the suggestion, but unfortunately was not able to resolve the problem with that information. –  KDP May 20 at 13:47
    
You example still uses $ –  Wyck May 20 at 18:55
    
Umm... so it did. Thank you, Wyck. It's working now! Add as a solution and I'd be happy to mark it! –  KDP May 20 at 22:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.