.noConflict()
jQuery.noConflict();
// Do something with jQuery
jQuery( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";
or
var j = jQuery.noConflict();
// Do something with jQuery
j( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";
Tabs
Assign a single class to the tabs to be hidden,
assign a target attribute to the tabs with a corresponding id on the section to be shown.
<div class="tabs">
<a class="showSingle" target="1"> Tab 1 </a>
<a class="showSingle" target="2"> Tab 2 </a>
<a class="showSingle" target="3"> Tab 3 </a>
<a class="showSingle" target="4"> Tab 4 </a>
</div>
<div id="div1" class="targetDiv"> Content #1 </div>
<div id="div2" class="targetDiv"> Content #2 </div>
<div id="div3" class="targetDiv"> Content #3 </div>
<div id="div4" class="targetDiv"> Content #4 </div>
// Show all tabs (more for ex; not practical)
// jQuery( '#showall' ).click( function() {
// jQuery( '.targetDiv' ).show();
// });
// hide all content-divs, show the target content-div
jQuery( '.showSingle' ).click( function(){
jQuery( '.targetDiv' ).hide();
jQuery( '#div' + $( this ).attr( 'target' ) ).show();
});