Mrthdrb

In my current project in about us page I need to add tabs to switch between different section I know this can be done by Jquery tabs but I don't know how to do this when integrating with magento.

Assuming you created a CMS Page already and name of that page is About Us this name should be included in if ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='your_page_name'):

Now add this code in your app/design/frontend/your_package/your_theme/template/page/html/head.phtml

<?php $headBlock = $this->getLayout()->getBlock('head');
 if ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='About Us'): 
 ?>
 <link rel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 <script type="text/javascript">jQuery.noConflict();</script>
 <script type="text/javascript"> jQuery(function() jQuery( "#tabs" ).tabs(); );</script>
 <?php endif; ?> 

Then open content section of your CMS Page.

<div style="float: right; width: 200px;">&nbsp;
<p>block type="tag/popular" template="tag/popular.phtml"</p>
</div>
<div id="tabs" style="width: 680px;">
<ul>
<li><a href="#tabs-1">You text here.</a></li>
<li><a href="#tabs-2">You text here.</a></li>
<li><a href="#tabs-3">You text here.</a></li>
</ul>
<div id="tabs-1">
<p>You text here.</p>
</div>
<div id="tabs-2">
<p>You text here.</p>
</div>
<div id="tabs-3">
<p>You text here.</p>
<p>You text here.</p>
</div>
</div>

paste this code and this will create jquery tabs in your frontend.Hope this helps.

here is a reference link if you have any doubts.

I wouldn't suggest to edit your head.phtml template for this. Most of the times you don't need a custom head template in your own theme because the core one is already doing its job.

Also personally I don't like to write code that's based on exceptions (if A then do this, if B then do this). If you need a lot of different javascripts on a lot of different pages, then your head.phtml would be filled with a lot of if statements.

I would suggest to add jQuery through layout XML. With CMS pages you have the ability to add extra layout XML in the admin when editing the page. Here you find an example setting a different template to the about us page. In the same way you can add jQuery to the about us page. Add this layout XML:

<reference name="head">
 <action method="addItem">
 <type>skin_js</type>
 <script>js/jquery-1.x.x.js</script>
 </action>
 <block type="core/text" name="jquery.noconflict">
 <action method="setText">
 <text><![CDATA[<script type="text/javascript">var $j = jQuery.noConflict();</script>]]>
 </text>
 </action>
 </block>
</reference>

Or just simple copy to you theme dir, like skinfrontend[your theme]defaultjs and add this to your theme's page.xml:

<action method="addItem">
 <type>skin_js</type>
 <script>js/jquery-1.9.1.min.js</script>
</action>

Okay I have found a way to make prototype, jQuery and bootstrap work without interfering with each other and without using jQuery.noConflict(). My layout setup (page.xml) was following(stripped for easier read):

<block type="page/html_head" name="head" as="head">
 <action method="addJs"><script>prototype/prototype.js</script></action>
 <action method="addJs"><script>lib/ccard.js</script></action>
 <action method="addJs"><script>prototype/validation.js</script></action>
 <action method="addJs"><script>scriptaculous/builder.js</script></action>
 <action method="addJs"><script>scriptaculous/effects.js</script></action>
 <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
 <action method="addJs"><script>scriptaculous/controls.js</script></action>
 <action method="addJs"><script>scriptaculous/slider.js</script></action>
 <action method="addJs"><script>varien/js.js</script></action>
 <action method="addJs"><script>varien/form.js</script></action>
 <action method="addJs"><script>varien/menu.js</script></action>
 <action method="addJs"><script>mage/translate.js</script></action>
 <action method="addJs"><script>mage/cookies.js</script></action>
 <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
 <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
 <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
 <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
 <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
 <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
</block>

I was getting errors like following:

TypeError: element.attachEvent is not a function

element.attachEvent("on" + actualEventName, responder);

TypeError: element.dispatchEvent is not a function

element.dispatchEvent(event);

I did not want to change $ everywhere. So, I made three javascript files as follows:

proto_to_temp.js having following code:

var $tempPrototypeDollar = $;

after_jquery.js having following code:

$ = jQuery;

after_all.js having following code:

$ = $tempPrototypeDollar;

As you can probably guess already, the first script assigns current $ variable (owned by prototype) to a temporary variable called $tempPrototypeDollar. Second script simply assigns jQuery to $. Third script assigns the content of $tempPrototypeDollar back to $.

I included these three scripts in the following order:

<block type="page/html_head" name="head" as="head">
 <action method="addJs"><script>prototype/prototype.js</script></action>
 <action method="addJs"><script>lib/ccard.js</script></action>
 <action method="addJs"><script>prototype/validation.js</script></action>
 <action method="addJs"><script>scriptaculous/builder.js</script></action>
 <action method="addJs"><script>scriptaculous/effects.js</script></action>
 <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
 <action method="addJs"><script>scriptaculous/controls.js</script></action>
 <action method="addJs"><script>scriptaculous/slider.js</script></action>
 <action method="addJs"><script>varien/js.js</script></action>
 <action method="addJs"><script>varien/form.js</script></action>
 <action method="addJs"><script>varien/menu.js</script></action>
 <action method="addJs"><script>mage/translate.js</script></action>
 <action method="addJs"><script>mage/cookies.js</script></action>
 <action method="addJs"><script>buzzthemes/buzz-intro/conflict/proto_to_temp.js</script></action><!-- First Script goes just before jQuery include-->
 <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
 <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_jquery.js</script></action><!-- Second Script goes just after jQuery include-->
 <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
 <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
 <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
 <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
 <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
 <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_all.js</script></action><!-- Third Script goes after all jQuery related code has been included -->
</block>

This solved all the problems for me and now jquery, bootstrap and prototype, all seem to work fine.

Include the following in the top of the design page

<script>
var $j = jQuery.noConflict();
</script>

And use jQuery as $j instead of $(Eg:$j('.class').hide();)

PS: You can use any other variable instead of j in var $j