jQuery conflicts

Actually, there is a far superior way of initially setting the first tab and its contents as active. The current method, using jQuery, means that the tab and contents load only fter a short delay. Using PHP instead means that they load immediately, with the rest of the page.

So we can get rid of that function in tabbed-js altogether. That whole file then looks like this:

jQuery( document ).ready( function( $ ) {

	$( '.wp-tabbed-tabs').each( function() {
		var tabs =  $( this );

		tabs.on( 'click', '.wp-tabbed-nav li', function( e ) {
			e.preventDefault();
			var tab = $( this );
			var t = tab.attr( 'data-tab' );
			if ( typeof t !== "undefined" ) {
				$( '.wp-tabbed-nav li', tabs ).removeClass('tab-active' );
				tab.addClass( 'tab-active' );
				$( '.wp-tabbed-cont',  tabs).removeClass('tab-active');
				$( '.wp-tabbed-cont.'+t,  tabs).addClass('tab-active');

			}
		});
	});

});

In wp-tabbed-widget.php, we then need to change lines 312 to 314 from this:

                        ?>
                        <li data-tab="tab-<?php echo esc_attr($k) ?>"><a href="#"><?php echo esc_html($data['settings']['title']); ?></a></li>
                    <?php

to this:

						if( $k == 0 ) { ?>
							<li class="tab-active" data-tab="tab-<?php echo esc_attr($k) ?>"><a href="#"><?php echo esc_html($data['settings']['title']); ?></a></li> <?php
						}
						else  { ?>
							<li data-tab="tab-<?php echo esc_attr($k) ?>"><a href="#"><?php echo esc_html($data['settings']['title']); ?></a></li>

						<?php }

We also need to change what is currently line 333 from this:

                        echo '<div class="wp-tabbed-cont tab-' . esc_attr($k) . '">';

to this:

                        if( $k == 0 ) {
							echo '<div class="tab-active wp-tabbed-cont tab-' . esc_attr($k) . '">';
                        }
                        else {
							echo '<div class="wp-tabbed-cont tab-' . esc_attr($k) . '">';
						}