WordPress.org

Ready to get started?Download WordPress

Forums

Post UI Tabs
[resolved] First tab always showing up (2 posts)

  1. BramNL
    Member
    Posted 1 year ago #

    Hi,

    I'm using PUT in a own written plugin (as documented here http://wordpress.org/support/topic/create-tabs-onside-template). It shows three tabs and they should start all hidden and toggle. This all works fine, but I do have a major problem.

    The issue is the first tab is always popping up with the other tabs. This is unexpected and I don't know how to fix that.

    The problem starts after clicking on a tab and refresh the page.

    In short, the code I used is:

    In the content plugin:

    <div id="tabs-bmaa" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    		<li><a href="#tabs-bmaa-1" class="bmaa-tab-anchor">Maak een (bel) afspraak</a></li>
    		<li><a href="#tabs-bmaa-2" class="bmaa-tab-anchor">Stuur ons een e-mail</a></li>
    		<li><a href="#tabs-bmaa-3" class="bmaa-tab-anchor">Bel ons <?php echo esc_attr( $phone_number ); ?></a></li>
    	</ul>
    	<div id="tabs-bmaa-1">
    		<h4>Maak een (bel) afspraak</h4>
    		[contact-form-7 id="170" title="Maak een (bel) afspraak"]
    	</div>
    	<div id="tabs-bmaa-2">
    		<h4>Stuur ons een e-mail</h4>
    		[contact-form-7 id="171" title="Stuur ons een e-mail"]
    	</div>
    	<div id="tabs-bmaa-3">
    		<!-- p>Tab content for “Bel ons”</p -->
    	</div>
    </div>

    Load Javascript:

    // Add the Javascript
    function bmaa_on_wp_footer() {
    	$script_deps = array( 'jquery-ui-core', 'jquery-ui-tabs' );
    	$version = '1.0.0';
    	wp_register_script( 'bmaa_post-ui-tabs', plugins_url( '/js/bm_about_author.js', __FILE__ ), $script_deps, $version, true );
    	wp_print_scripts( 'bmaa_post-ui-tabs' );
    }
    add_action( 'wp_footer', 'bmaa_on_wp_footer' );

    In bm_about_author.js

    jQuery(document).ready(function($){
    	$(function() {
    		$( "#tabs-bmaa" ).tabs({
    			fx: [{opacity:'toggle', duration:'fast'},   // hide option
    				{opacity:'toggle', duration:'fast'}],
    			active: false,
    			collapsible: true
    		});
    	});
    });

    The live example can be seen here:
    http://dev.lancyr.bnux.nl/financieel-advies-en-service/

    http://wordpress.org/extend/plugins/put/

  2. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    Are you creating these tabs using the plugin or writing your own code to utilize jQuery tabs? You seem to be doing a bit of both and i can't quite follow your implementation because you appear to have code above that doesn't lineup with the markup PUT creates(if want to do your own implementation that's awesome, but why run the plugin?).

    Eg. If you're following the example here, you don't need my plugin.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic