JS+CSS-Problem bei der Darstellung von Elementen

[Wolfgang Schlaupitz]

Es soll ein <div>-Bereich ein- und ausgeblendet werden.

JS:
function changeVisibility(id) {
 if (document.getElementById) {
  if (document.getElementById(id).style.display == "none") {
   document.getElementById(id).style.display = "block";
  } else {
   document.getElementById(id).style.display = "none";
  }
 }
}

XHTML:
...
<div class="blubb">
<a href="#" onclick="changeVisibility('id');">
...
</a>
<div style="display: none" class="bla" id="id_a">
...
</div>
</div>
...

Dies funktioniert so auch ganz wunderbar!

Jetzt kommt das Problem:
Ich möchte die CSS-Angabe >>style="display: none"<< in eine externe CSS-Datei auslagern.
.bla {
display: none;
}

Dabei entsteht folgendes Problem:
Wird die XHTML-Datei aufgerufen reagiert das "Ein- und Ausblenden" erst auf den zweiten Klick bzw. Doppelklick und dies ist super unschön.

Für Hilfe wäre sehr dankbar.

Gruss

Wolfgang