slideToggle and toggleClass not working together?

Question

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");
            }
        });

    });

Answer 1

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?