Collapsing div still executes code - how do I only execute code when the div is expanding?

Hi, I have the following repeating code in a web page:

<a href="#null" onclick="getdetails('111_<%=thefirstcounter%>')"/><%=thefirstcounter%></a></td>
<div id="111_<%=thefirstcounter%>" style="display:none;">
<img src="images/loading.gif" /> <font color="red"> Executing, please wait</font>
</div>

part of the javascript is as follows:

var ImRunning = false;

function getdetails(counter)
{
  if (!ImRunning) {
    ImRunning = true;
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null) {
      alert ("Your browser does not support AJAX!");
      ImRunning = false;
      return;
    }
var url="getdetails.asp";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
theCounter = counter;
showHide();
xmlHttp.send(null);
}
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
var whatWasReturned = xmlHttp.responseText;
var pos = whatWasReturned.indexOf("vvvvv");
if (pos == -1)
{
document.getElementById(theCounter).innerHTML=xmlHttp.responseText;
ImRunning = false;
}
else
{
ImRunning = false;
window.location = "http://www.google.com";
}
}
}      

function showHide()
{      
if (theCounterNextNext == "")
{
      window.location.href = "http://www.google.com"
}
else
{
if (document.getElementById(theCounter).style.display == 'none')
{
document.getElementById(theCounter).style.display = '';
}
else
{
document.getElementById(theCounter).style.display = 'none';
}
}
}

One thing I've noticed is that whether you expand or collapse each div, the page getdetails.asp gets executed. How can I adjust the code above so that the getdetails.asp page is only executed when I'm exanding the div?Start Free Trial