.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();
});

results matching ""

    No results matching ""