Hi,

I'm a newbie in the world of javascript and wanted to share a problem which I had.
I'm unable to understand the cause & resolve the peculiar problem I have. So please do help...

here are the java functions I'm using to show and hide main DIV - faqback
************************************************************************

<script type="text/javascript">
function ShowDiv(Q, A){
var Query;
var Response;
Query =Q;
Response = A;
Question.firstChild.nodeValue="";
Answer.firstChild.nodeValue="";
Question.firstChild.nodeValue=Query;
Answer.firstChild.nodeValue=Response;
$('#faqback').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 0.9});
}

function HideDiv(){
$("#faqback").fadeOut("slow");
}
</script>

here's the html piece of code
************************************************************************
<div id="faqback" class="faqback">
<div class="QnA">
<div onclick="HideDiv()" ><img src="images/close.png"/> </div>
<p id="Question" > My question goes here? </p>
<p id="Answer"> My answer Goes here </p>
</div>
</div>
</div>

<a href="javascript:void(0);" onclick="ShowDiv('Question1','Answer1')" > Question 1 <br/> </a>
<a href="javascript:void(0);" onclick="ShowDiv('Question2','Answer2')" > Question 2 <br/> </a>
<a href="javascript:void(0);" onclick="ShowDiv('Question3','Answer3')" > Question 3 <br/> </a>
<a href="javascript:void(0);" onclick="ShowDiv('Question4','Answer4')" > Question 4 <br/> </a>
<a href="javascript:void(0);" onclick="ShowDiv('Question5','Answer5')" > Question 5 <br/> </a>

********************************************************************************

The ShowDiv and HideDiv works only once and then it doesn't. But if the HideDiv function is altered to
$("#faqback").fadeOut("slow",function(){location.reload(true);});
then it works but it reloads the entire page causing a delay in loading and visually there's a
disconnected feel.

Thanks in advance