How include jquery tabs in product\view.phtml in Magento 1.7.0.2

Question

I am using Magento 1.7.0.2 version

I want to add 3 jquery divs in my product page in default\\template\\catalog\\product\\view.phtml

<script>
    $(function() {

        $( "#3tabs_product" ).tabs();

    });
</script>  

 <div id="3tabs_product">
    <ul>
        <li><a href="#tabs-1">Product Informatie</a></li>
        <li><a href="#tabs-2">Leveringsvoorwaarden</a></li>
        <li><a href="#tabs-3">Beoordelingen</a></li>
    </ul>
    <div id="tabs-1">Product Informatie.</div>
    <div id="tabs-2">Leveringsvoorwaarden</div>
    <div id="tabs-3">Beoordelingen</div>
</div>

The problem is that the these 3 tabs in order to run, I have to include two lines of jquery ui and jquery JUST ABOVE THE CODE ABOVE THEM

 <script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

But this "breaks" my TopMenulinks which are using jquery1.7.1 ! and my add to cart function which is javascript.

If I include the 2 jquery lines the tabs are ok but the dropdown menu and the "add to cart breaks" .... If I remove the lines the menu is restored and the add to cart works again . But without including the two lines the 3Tabs are not working!!!

What should I do ???

Answer 1

<script type="text/javascript">
  $.noConflict(); //Use no conflict here instead of js file
  // Code that uses other library's $ can follow here.
</script>

You may change the order of library file initiating. In page.xml change order as below

1. jquery.js
2. noconflict.js
3. prototype.js This will avoid the error in IE8.

Add this to your html page can solve your issue.

let me know if i can help you more.

Answer 2

You add this line of code $j = jQuery.noConflict() to your query library file and update your code like:

<script type="text/javascript">
    $j(function() {
        $j( "#3tabs_product" ).tabs();
    }); 
</script>

or You can also use http://www.magentocommerce.com/magento-connect/magento-easytabs.html this great community module.