Skip to content

Instantly share code, notes, and snippets.

@tommcfarlin
Last active August 26, 2015 13:31
Embed
What would you like to do?
[WordPress] How to use Bootstrap events to manage tab change events in WordPress development.
<ul class="nav acme-tabs" role="tablist"></ul>
<li role="presentation" class="active">
<a data-toggle="tab" href="#home">Home</a>
</li>
<li role="presentation">
<a data-toggle="tab" href="#questions">Questions</a>
</li>
<li class="settings">
<a data-toggle="tab" href="#settings">Settings</a>
</li>
</ul><!-- .acme-tabs --<
var anchor;
$( 'a[data-toggle="tab"]' ).on( 'shown.bs.tab', function( evt ) {
// Read the a href of the anchor that was clicked
anchor = $( evt.target ).attr( 'href' );
// Trim the leading '#' from the href attribute
anchor = criteria.substr( 1, criteria.length );
// We'll see this in the next gist
acme_toggle_display( $, anchor );
});
/**
* Initiates an Ajax request and then, based on the response, determines whether
* or not the #acme-element should be displayed or hidden.
*
* Note that this assume you have the WordPress Ajax library loaded and are comfortable
* with Ajax in WordPress.
*
* @since 1.0.0
*
* @param object $ A reference to the jQuery object.
* @param string anchor The name of the anchor, or tab, that was clicked when this function was called.
*/
function acme_toggle_display( $, achor ) {
$.get( ajaxurl, {
'action': 'acme_should_toggle_element',
'data': anchor
}, function( response ) {
if ( 'true' === response ) {
$( '#acme-element' ).hide();
} else {
$( '#acme-element' ).show();
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment