Question

i have done an Accordion style jQuery function which works lovely, but would like to add to it fadeOut and FadeIn here is the part of the code:

$('.product-accordion-trigger').click(function(){
        if( $(this).next().is(':hidden') ) {
            $('.product-accordion-trigger').removeClass('active').next().slideUp();
            $(this).toggleClass('active').next().slideDown();
        }
        return false;
    });

Im wanting to it fadeOut then slideUp and then again fadeOut on slideDown

Your time and help is much appriciated 🙂

Thanks

UPDATED – Working Version

I managed to get it all working great and the solution was as follows:

$('.product-accordion-trigger').click(function(){
        if( $(this).next().is(':hidden') ) {
            $('.product-accordion-trigger').removeClass('active').next().animate({ height: 'hide', opacity: 0 });
            $(this).toggleClass('active').next().animate({ height: 'show', opacity: 1 });
        }
        return false;
    });

Thanks to lolwut for the original kick start! hope this helps anyone else with the same problem

Answer 1

Managed to get it working as needed with the following. Hope it helps anyone else looking for a similar solution!

$('.product-accordion-trigger').click(function(){
    if( $(this).next().is(':hidden') ) {
        $('.product-accordion-trigger')
            .removeClass('active').next()
            .animate({ height: 'hide', opacity: 0 });

        $(this).toggleClass('active').next()
            .animate({ height: 'show', opacity: 1 });
    }
    return false;
});

http://api.jquery.com/animate/

In addition to numeric values, each property can take the strings
‘show’, ‘hide’, and ‘toggle’.