I found the code somewhere in the world, and due to its dead simple nature, I found some things in need to fix, like when hovering the trigger, the content is jumping up down before it settled. I have tried to change the trigger from the title of the accordion block to the whole accordion block to no use.

I need help to add a delay and only do the accordion when the cursor is focus in the block. I have corrected my css to make sure the block is covering the hidden part as well when toggled.

Here is my latest modified code:

var acTrig = ".accordion .title";
$(acTrig).hover(function() {
             $(".accordion .content").slideUp("normal");
             $(this).next(".content").slideDown("normal");
});
$(acTrig).next(".content").hide();
$(acTrig).next(".content").eq(0).css('display', 'block');

This is the HTML:

<div class="accordion clearfix">
<div class="title">some Title 1</div>
<div class="content">
  some content blah
</div>
</div>
<div class="accordion clearfix">
<div class="title">some Title 2</div>
<div class="content">
  some content blah
</div>
</div>
<div class="accordion clearfix">
<div class="title">some Title 3</div>
<div class="content">
  some content blah
</div>
</div>

I think I need a way to stop event bubbling somewhere around the code, but can't get it right.

Any help would be very much appreciated.

Thanks as always.