Question

On the code above, we:

1) Click on Categoria A and then,
2) click on one of the bold titles that appear.

You will notice that, while expanding instead of the movement to be smooth, it jumps near the end of the show process. (It seems that when it finds a <p> he jumps);

What could be the cause of such a behavior?

Here his the related code: code:

$('#btCategoriaA').click(function() {
            $('#btCategoriaA').toggleClass('selecionado');
            $('#listaCategoriaA').slideToggle('slow', function() {
           });
        });


        $('#btCategoriaB').click(function() {
            $('#btCategoriaB').toggleClass('selecionado');
            $('#listaCategoriaB').slideToggle('slow', function() {
            });
        });

        $('#btCategoriaC').click(function() {
            $('#btCategoriaC').toggleClass('selecionado');
            $('#listaCategoriaC').slideToggle('slow', function() {
           });
        });



        function mostraDesafio(num){
            $('#detalheDesafio'+num).slideToggle('slow');
        }

Should I provide more information,please, just let me know about it.

K. Regards,
MEM

Answer 1

Give your .detalheDesafio element a definite width in CSS. That should fix it.

.detalheDesafio {
    width: 308px;
}

I don’t remember why it is needed, but the .slideToggle() method requires it somehow.