Asp.Net repeater control with javascript

Question

I have created FAQ page using Repeater Control, The questions and Answers are bound Run-time from Code Behind as Follows.

ASPX code

<asp:Repeater ID="RepDetails" runat="server">
 <ItemTemplate>
 <table id="tblRepeater">
    <tr id="QARow" runat="server">
      <td>
       <div id="QuestionDiv" onclick="return show(this, 'AnswerDiv');">
        Q:<asp:label id="lblQuestion" runat="server" Text='<%# Eval("Question")%>' CssClass="lblQueClass"></asp:label>
       </div>
       <div id="AnswerDiv" style="display:none;">
        Ans:<asp:Label id="lblAnswerClass" runat="server" Text='<%# Eval("Answer")%>' CssClass="lblAnswerClass"></asp:Label>
       </div>
      </td>   
    </tr>
  </ItemTemplate>
  <FooterTemplate>
 </table>
  </FooterTemplate>
</asp:Repeater>

It Works great ! The thing is i have used following Script for opening and closing the Answer.

<script type="text/javascript">
   function show(QuestionDiv, AnswerDiv) {
   var arrDIVs = QuestionDiv.parentNode.getElementsByTagName("Div");
   for (var i = 0; i < arrDIVs.length; i++) {
        var oCurDiv = arrDIVs[i];
        if (oCurDiv.id.indexOf(AnswerDiv) >= 0) {
            var blnHidden = (oCurDiv.style.display == "none");
            oCurDiv.style.display = (blnHidden) ? "block" : "none";
            }
         }
       return false;
     }
</script>

It works like, when clicked on One Question It shows the answer of that question.

My Question is: I want to update the script so as when we click on One particular question, It should display the Answer of that question, also it should hide the Answer of other Question.(like http://www.edubrainschool.com/faq.php ).

Answer 1

The best way for that would be to bind click of that TR. You can do this by applying a css to the TR.

    <asp:Repeater ID="RepDetails" runat="server">
 <ItemTemplate>
 <table id="tblRepeater">
    <tr id="QARow" runat="server" class="TROpenCSS">
      <td>
       <div id="QuestionDiv" class="QuestionCSS" onclick="return show(this, 'AnswerDiv');">
        Q:<asp:label id="lblQuestion" runat="server" Text='<%# Eval("Question")%>' CssClass="lblQueClass"></asp:label>
       </div>
       <div id="AnswerDiv" class="AnswerCss" style="display:none;">
        Ans:<asp:Label id="lblAnswerClass" runat="server" Text='<%# Eval("Answer")%>' CssClass="lblAnswerClass"></asp:Label>
       </div>
      </td>   
    </tr>
  </ItemTemplate>
  <FooterTemplate>
 </table>
  </FooterTemplate>
</asp:Repeater>

And the bind the click event of those CSS

$('.TROpenCSS').bind('click',function(){
// Do your code to show the TD
});

Add other bind for all clicks / mouseover

Or you can use "ddaccordion.js" or refer to the following link