Here is my script:
<script type="text/javascript">
$(document).ready(function () {
$(".div_question").toggle(function () {
var answer= "answer" + $(this).attr("id");
$("xxx").slideDown(); // what could i write here.
}, function () {
var answer= "answer" + $(this).attr("id");
$("xxx").slideUp();
});
});
</script>
and here is my content page:
<asp:Repeater ID="Repeater_question" runat="server" DataSourceID="SqlDataSource_question">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div>
<div class="div_question" id='<%# Eval("question_id") %>'>
<strong><%# Eval("question_header") %></strong>
</div>
<div class="div_answer" id='<%# "answer"+Eval("question_id") %>' style="display: none; padding: 5px 5px 5px 15px;">
<%# Eval("question_content") %>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
I want select div_answer
to show / hide. What I write instead of "xxx", I cant find correct syntax. In the master page, when I write $("#" + answer)
it works. But, in content page, it doesn't work.
Based on your markup structure you can just use next()
and be done with it. next()
finds the immediately following sibling optionally filtered by a selector.
$(document).ready(function () {
$(".div_question").toggle(function () {
$(this).next().slideDown();
}, function () {
$(this).next().slideUp();
});
});