Changing the tabs manually in jquerytools to have a default tab when mouse is out of the tab container

197 Views Asked by At

I have a perfect working jquerytools accordion / tabs that change with mouse hover.

I want that when the mouse is out of the tabs container, a default tab to be activated instead the last activated tab.

My javascript is as follows:

$(function() {
    $("#accordion").tabs("#accordion div", {
    tabs: 'img.tab',
    effect: 'fade',
    event: 'mouseover'
    });     
});

$('#accordion').mouseout(function(){
    // How should I activate a special tab?
});

EDIT

The HTML of #accordion container:

<div id="accordion">
    <!-- accordion header #1 -->
    <div>
        <img src="img/sample-tab-content.png" />
    </div>
    <img class="tab" src="./img/tab-title-activities.png" />

    <div>
        <h3>apprenticeship</h3>
        <p>Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat.</p>
    </div>
    <img class="tab" src="./img/tab-title-apprenticeship.png" />

    <div>
        <h3>association</h3>
        <p>Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.</p>
    </div>
    <img class="tab" src="./img/tab-title-association.png" />
</div>

Images with class="tab" are the tabs and their above HTML are tab contents.

I can now see that I have even problem with detecting the mouseout event of #accordion container.

Even the following code doesn't work:

$('#accordion').mouseout(function(){
    alert('done');
})

The alert is given TWICE when the mouse comes IN any of the children of #container.


EDIT 2

I had to use mouseleave instead of mouseout as the event and this brings us back to the main problem (selecting the default tab):

$('#accordion').mouseleave(function(){
    $('#accordion').tabs('select', 1);
})

The code stops tabs from changing and completely corrupts the tab bar.

1

There are 1 best solutions below

3
On

update

$('#accordion').leave(function(){
    // How should I activate a special tab?
   var $accordion = $("#accordion").accordion();
   $accordion.accordion("option","active",1); //go to first tab on mouseleave

});

is what you'll need :))