jQuery Forum

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:

1.  $("#fauxAccordion").click(function () {
2.              $(this).toggleClass("accordion_arrow_south");
3.          });

With this hide() function:

1.  $(function () {
                   $(".accordionInner").hide();
                   $(".accordionTrigger").hoverIntent(function () {
                       $(".accordionInner").slideDown();
                   }, function () {
                       $(".accordionInner").slideUp("slow");
                   });
                   $(".accordion_reclose").hoverIntent(cfg);             
   });
2. var cfg = ($.hoverintent = {
3.         sensitivity: 100,
4.         interval: 500
5.     }); 
   

The combined function

1.  $(function () {
2.                 $(".accordionInner").hide();
3.                 $(".accordionTrigger").hoverIntent(function () {
4.                     $(".accordionInner").slideDown();
5.                     $("#fauxAccordion").toggleClass("accordion_arrow_south");
6.                 }, function () {
7.                     $(".accordionInner").slideUp("slow");
8.                     $("#fauxAccordion").toggleClass("accordion_arrow_east");
9.                 });
10.                 $(".accordion_reclose").hoverIntent(cfg);
11. });
12. 
    
13. var cfg = ($.hoverintent = {
14.         sensitivity: 100,
15.         interval: 500
16.     }); 

HTML

1. <div class="accordionTrigger">
2. <div class="header_10"><b>Header Goes Here<span style="padding-left:2em" class="accordion_arrow_east" id="fauxAccordion"></span></b></div>
3. <div class=" accordionInner">
4. Content Goes Here
5. </div>
6. </div>
7.   <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).