Question

This works awesome when I need it to slide down and up but because of my css there is a double border when its up. So I tried taking out the top border in the main css and adding it after the slide but if someone toggles again its still there. How would I make it so that at first position (when its up) there is no border top and when its at second position (when its down) there is a border top. Here is my code

$('.product').click(function() {
  $('.info').slideToggle('slow', function() {
    $('.product').css( "border-top","1px solid #000" );
  });
});

Answer 1

Demo jsBin

$('.product').toggle(function() {
    $('.info').stop(1).slideDown('slow');
    $(this).css( "border-top","1px solid #000" );
}, function(){
    $('.info').stop(1).slideUp('slow');
    $(this).css( "border-top","1px solid transparent" );
});

I used .stop(1) to clear some animation queue.