Collapse problem on jquery tabs

Collapse problem on jquery tabs

Hi.I am fairly new to JQuery so aoplogies in advance if I fail to explain correctly ot if I have posted in the wrong forum.

Essentially,  I have a number of horizontal rows of  icons that are collapsed by default on page load, when a user clicks an icon,  a tab pane opens with a subset of icons for them to choose.
All this is working perfectly in Visual Studio,  however I am having a problem when this is inserted into a Dot Net Nuke skin page.

Because DNN automatically loads its own libaries of JQuery I found out by trial and error that I can only add a reference to one additional script (which deals with collapse and click function) without causing a jquery conflict.

The tabs are all open on page load, but they do close correctly if clicked and apart from the load issue everything else is working fine.

Interestingly, if I add an image slider/gallery to the same page the Tabs work perfect, of course I would like a a better solution.
Anyway this is the uitabs-services script I added to DNN in the hope that someone can spot a workaround

$(function() {
    $("#tabs-services-row1, #tabs-services-row2").tabs({
        collapsible:true,
        selected: -1,
        fx: { height: 'toggle', duration: 'normal' }        
    });
    return false;
});




$(function () {
   
    $("#tabs-services-row1 ul.toptabs li a").click (function(){
         $( "#tabs-services-row2" ).tabs('option', 'selected', -1);
    });
   
    $("#tabs-services-row2 ul.toptabs li a").click (function(){
        $( "#tabs-services-row1," ).tabs('option', 'selected', -1);
    });

       
    $("#tabs-services-row1 .tab-pane a.btn-tabs-services-close").click (function(){
        $( "#tabs-services-row1" ).tabs('option', 'selected', -1);
        return false;
    });
});

Regards Stuart

[moderator moved]