Question

I have the following code:

$('a.btn-slide').toggle(function() {
    $("#SliderDIV").slideDown("fast");
    $(this).text('Hide/Show');
});

Only in Firefox, when I click the a href link to hide/show the DIV, Firefox display a dotted border around the href link (which I don’t understand why and it shouldn’t be).

However, in IE and Chrome, when I toggle the link – it does not create this strange border around the link.

Answer 1

Thus, you want to get rid of the dotted outline?

Just do

a {
   outline: none;
}

This however impacts users with keyboard navigation. They won’t be able anymore to figure which link they’ve tabbed now.