Accordion with hoverIntent Plugin
This successfully combines jQuery UI Accordion with Brian Cherne's hoverIntent Plugin
by chayacooper
HTML
<script src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id=Trigger2>
<h3>Section 1</h3>
<div>
Clothing Size - Tops:
<select name="clothing_size_tops">
<option value="0"> 0</option>
<option value="2"> 2</option>
<option value="4"> 4</option>
<option value="6"> 6</option>
<option value="8"> 8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
</select>
</div>
<h3>Section 2</h3>
<div>
Clothing Size - Bottoms:
<select name="clothing_size_bottoms">
<option value="0"> 0</option>
<option value="2"> 2</option>
<option value="4"> 4</option>
<option value="6"> 6</option>
<option value="8"> 8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
</select>
</div>
<h3>Section 3</h3>
<div>
Shoe Size:
<select name="shoe_size">
<option value="6"> 6</option>
<option value="6.5">6.5</option>
<option value="7"> 7</option>
<option value="7.5">7.5</option>
<option value="8"> 8</option>
<option value="8.5">8.5</option>
<option value="9"> 9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
<option value="10.5">10.5</option>
<option value="11">11</option>
<option value="11.5">11.5</option>
</select>...
JavaScript
$(document).ready(function() {
$("#Trigger2").accordion({
active: false,
collapsible: true
}).hoverIntent({
over: function() {},
out: function() {
$('.ui-accordion-header-active', this).trigger('click').blur();
},
timeout: 1000
})
// WARNING: applying hoverIntent on headers will cause problems if
// the user *immediately* clicks the header when moving into it!...
.children('h3').hoverIntent({
over: function() {
$(this).not('.ui-accordion-header-active').trigger('click');
},
out: function() {},
timeout: 1000
});
});