what's wrong with my jquery toggle

Question

i have div which its id is: manufacturer_63... its style is: display:none, visibility:hidden.

what i've written is:

$('select.styled2').change(function() {

     var id = this.value;

            $.ajax({
              type: "GET",
              url: 'index.php?act=manufacturerHome&id='+id,
              success: function(data) {

                $("#manufacturer_"+id).html(data);
              }
            });

     $("#manufacturer_"+id).css('visibility','visible');
     $("#manufacturer_"+id).toggle("slow");

});

it does not toggles it. if i try to:

 $("#manufacturer_"+id).css('display','block');

instead of toggle - it works.

if i do just toggle of something it works.

Answer 1

You should really be doing this:

$('select.styled2').change(function() {
    var id = this.value;

    $.ajax({
        type: "GET",
        url: 'index.php?act=manufacturerHome&id='+id,
        success: function(data) {
            $("#manufacturer_"+id).html(data);
            $("#manufacturer_"+id).css('visibility','visible');
            $("#manufacturer_"+id).toggle("slow");
        }
    });
});

In your code, the element will be shown regardless whether or not the ajax call is finished whereas this will show the element only after the ajax call is successful.

As an aside, you don't need both display: none and visibility: hidden . Just display: none will suffice and you can then get rid of $("#manufacturer_"+id).css('visibility','visible'); .