I'm trying to combine these toggleClass() and hide() functions, but when they are combined the toggle function only works properly with slideDown() and isn't toggling back as it should with slideUp()
I'm trying to combine this toggleClass() function:
- $("#fauxAccordion").click(function () {
- $(this).toggleClass("accordion_arrow_south");
- });
With this hide() function:
- $(function () {
$(".accordionInner").hide();
$(".accordionTrigger").hoverIntent(function () {
$(".accordionInner").slideDown();
}, function () {
$(".accordionInner").slideUp("slow");
});
$(".accordion_reclose").hoverIntent(cfg);
}); - var cfg = ($.hoverintent = {
- sensitivity: 100,
- interval: 500
- });
The combined function- $(function () {
- $(".accordionInner").hide();
- $(".accordionTrigger").hoverIntent(function () {
- $(".accordionInner").slideDown();
- $("#fauxAccordion").toggleClass("accordion_arrow_south");
- }, function () {
- $(".accordionInner").slideUp("slow");
- $("#fauxAccordion").toggleClass("accordion_arrow_east");
- });
- $(".accordion_reclose").hoverIntent(cfg);
- });
- var cfg = ($.hoverintent = {
- sensitivity: 100,
- interval: 500
- });
HTML
- <div class="accordionTrigger">
- <div class="header_10"><b>Header Goes Here<span style="padding-left:2em" class="accordion_arrow_east" id="fauxAccordion"></span></b></div>
- <div class=" accordionInner">
- Content Goes Here
- </div>
- </div>
- <div class="accordion_reclose">
Next Section
</div>
The div following
accordionInner is assigned a class of accordion_reclose, so that the
accordionInner content slides up and the icon class changes.
I'm
essentially trying to replicate an accordion because I haven't been
able to get hoverIntent to work with jQuery UI's accordion (I have a row
of dropdowns in an accordion, and without hoverIntent the accordion
closes as soon as the user moves off the first Select element).