Add delay and focus for a dead simple accordion jquery
- by kuswantin
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.
