CODEWITHSUNDEEP
jqueryhtmlcssaccordionslidetoggle
Zi_31
Zi_31

Reputation: 342

slideToggle and toggleClass not working together?

I am trying to slideToggle and then afterwards toggleclass, but by adding the toggleclass the slideToggle does not 'slide' anyone know how i can fix this?

fiddle and code below.

 $(function () {
        $(".expand").on("click", function () {
            $(this).next().slideToggle().toggleClass('slidein');

            $expand = $(this).find(">:first-child");


            if ($expand.text() == "\u25B6") {
                $expand.text("\u25BC");


            } else {
                $expand.text("\u25B6");
            }
        });

    });

Upvotes: 0

Views: 523

Answers (1)

Giacomo Paita
Giacomo Paita

Reputation: 1419

It is working perfectly, but you hide the element and THEN add the class, so you can not see the toggleClass.

You made some mistakes in the CSS file and in the logic of JS. remove the CSS3 transitions and it will works ok.

transition: all 1s ease-in-out;

Finally, sort the code without the toggle methods, like this:

 $(function () {
    $(".expand").on("click", function () {

        if( $(this).parent().find('.detail').css('display') == 'block' ){ 
          $(this).parent().find('.detail').slideUp();
          $(this).parent().find('#titles').animate({'left' : -200});
        } else {
          $(this).parent().find('.detail').slideDown();
          $(this).parent().find('#titles').animate({'left' : 0});
        }

    });

});

See my working demo: JSBIN. Is it what you need to have?

Upvotes: 1

Related Questions