jQuery UI tab does not work in the plugin page

Question

First check all the JS files are loaded properly by going to Chrome Developer Tools. Also check if any other script is causing any error or not. You can check this by Chrome Dev Tools.

Some Improvements:

Add jquery-ui-tabs as a dependency of nibiz script and I’ll suggest rewrite the custom.js JavaScript code. So your whole code will be like below-

add_action('admin_enqueue_scripts','nibiz_billing_init');

function nibiz_billing_init() {
    // Don't need to wp_enqueue_script( 'jquery-ui-tabs' ) since you're in the admin panel.
    // wp_enqueue_script( 'jquery-ui-tabs' );
    // Add 'jquery-ui-tabs' as dependency.
    wp_enqueue_script( 'nibiz', plugins_url( '/js/customer.js', __FILE__ ), array('jquery-ui-tabs'));
}


add_action('admin_menu', 'billing_settings_menu');

function billing_settings_menu() {

    add_menu_page( 'Billing Settings', 'Billing Link',
                   'manage_options',  __FILE__, 'billing_settings_page',
                   screen_icon('edit'));

    add_submenu_page( __FILE__, 'About My Plugin',
                      'About', 'manage_options','nibiz_about',
                      'billing_settings_page_about' );
}

function billing_settings_page() {
    ?>

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">First</a></li>
            <li><a href="#tabs-2">Second</a></li>
            <li><a href="#tabs-3">Third</a></li>
        </ul>
        <div id="tabs-1">Lorem ipsum dolor sit amet,
            consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div id="tabs-2">Phasellus mattis tincidunt
            nibh. Cras orci urna, blandit id, pretium vel, aliquet
            ornare, felis. Maecenas scelerisque sem non nisl.
            Fusce sed lorem in enim dictum bibendum.</div>
        <div id="tabs-3">Nam dui erat, auctor a,
            dignissim quis, sollicitudin eu, felis. Pellentesque
            nisi urna, interdum eget, sagittis et, consequat
            vestibulum, lacus. Mauris porttitor ullamcorper
            augue.</div>
    </div>



    <?php
}
?>

And the custom.js code will be-

//jquery-ui-tabs
(function($) {
    // After the document is ready
    $(function(){
        $('#tabs').tabs();
    });
})(jQuery);

Hope that helps.

Related Posts: