I am trying to hide/show/toggle a div when a button is clicked. I am using ASP.NET and everything is inside an ASP:Datalist.
I can show or hide the div correctly. However it opens all the divs instead of just the one where the button was selected. The div is am trying to show/hide is .content
How can I open only the div that the button belongs?
JSFiddle - here's an example of the problem /
The script:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery(".content").hide();
});
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#man').live('click', function (event) {
jQuery('.content').toggle('show');
});
});
</script>
The datalist (ASP.NET)
<asp:DataList runat="server" id="dgQuestionnaire" DataKeyField="QuestionID" >
<ItemTemplate>
<div class="question_box">
<p class="small_bold">Question <asp:Label ID="lblOrder" runat="server" Text='<%# Container.ItemIndex + 1 %>'></asp:Label></p>
<div class="Questions">
<div class="heading">
<asp:HiddenField ID="hiddenQuestionID" runat="server" Value='<%# Eval("QuestionID") %>' />
<asp:TextBox runat="server" ID="tbQuestionName" Text='<%# Eval("QuestionText") %>' CssClass="form" Width="300px"></asp:TextBox>
<input type='button' id='man' value='hide/show'>
</div> <!-- end heading -->
<div class="content">
<p class="small_bold new">Question Type</p>
<asp:DropDownList runat="server" ID="QuestnType" CssClass="question_dropdown">
<asp:ListItem Value="1">Check Boxes (Multiple Choice)</asp:ListItem>
<asp:ListItem Value="2">Drop Down</asp:ListItem>
<asp:ListItem Value="3">Open Ended</asp:ListItem>
<asp:ListItem Value="4">Radio Buttons (Single Choice)</asp:ListItem>
<asp:ListItem Value="5">Range (Percentage)</asp:ListItem>
</asp:DropDownList>
<asp:DataList ID="nestedDataList" runat="server">
<ItemTemplate>
<p class="new">Answer <asp:Label ID="lblAnswerOrder" runat="server" Text='<%# Container.ItemIndex + 1 %>'></asp:Label></p>
<asp:HiddenField ID="hiddenAnswerID" runat="server" Value='<%# Eval("AnswerID") %>' />
<asp:TextBox ID="TextBox1" runat="server" CssClass="form" Text='<%# Eval("AnswerID") %>' Width="300px"></asp:TextBox>
<asp:TextBox ID="tbAnswerText" runat="server" CssClass="form" Text='<%# Eval("AnswerTitle") %>' Width="300px"></asp:TextBox>
</ItemTemplate>
</asp:DataList>
<asp:Button runat="server" ID="updateName" CssClass="button_update" style="border: 0px;" onClick="UpdateQuestionName_Click" />
<asp:Button runat="server" ID="btnDelete" Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this question?');" />
</div>
</div> <!-- end Questions -->
</div> <!-- end questionbox -->
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery(".content").hide();
});
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#man').live('click', function (event) {
jQuery('.content').toggle('show');
});
});
</script>
</ItemTemplate>
I am trying to hide/show/toggle a div when a button is clicked. I am using ASP.NET and everything is inside an ASP:Datalist.
I can show or hide the div correctly. However it opens all the divs instead of just the one where the button was selected. The div is am trying to show/hide is .content
How can I open only the div that the button belongs?
JSFiddle - here's an example of the problem http://jsfiddle/kMEre/
The script:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery(".content").hide();
});
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#man').live('click', function (event) {
jQuery('.content').toggle('show');
});
});
</script>
The datalist (ASP.NET)
<asp:DataList runat="server" id="dgQuestionnaire" DataKeyField="QuestionID" >
<ItemTemplate>
<div class="question_box">
<p class="small_bold">Question <asp:Label ID="lblOrder" runat="server" Text='<%# Container.ItemIndex + 1 %>'></asp:Label></p>
<div class="Questions">
<div class="heading">
<asp:HiddenField ID="hiddenQuestionID" runat="server" Value='<%# Eval("QuestionID") %>' />
<asp:TextBox runat="server" ID="tbQuestionName" Text='<%# Eval("QuestionText") %>' CssClass="form" Width="300px"></asp:TextBox>
<input type='button' id='man' value='hide/show'>
</div> <!-- end heading -->
<div class="content">
<p class="small_bold new">Question Type</p>
<asp:DropDownList runat="server" ID="QuestnType" CssClass="question_dropdown">
<asp:ListItem Value="1">Check Boxes (Multiple Choice)</asp:ListItem>
<asp:ListItem Value="2">Drop Down</asp:ListItem>
<asp:ListItem Value="3">Open Ended</asp:ListItem>
<asp:ListItem Value="4">Radio Buttons (Single Choice)</asp:ListItem>
<asp:ListItem Value="5">Range (Percentage)</asp:ListItem>
</asp:DropDownList>
<asp:DataList ID="nestedDataList" runat="server">
<ItemTemplate>
<p class="new">Answer <asp:Label ID="lblAnswerOrder" runat="server" Text='<%# Container.ItemIndex + 1 %>'></asp:Label></p>
<asp:HiddenField ID="hiddenAnswerID" runat="server" Value='<%# Eval("AnswerID") %>' />
<asp:TextBox ID="TextBox1" runat="server" CssClass="form" Text='<%# Eval("AnswerID") %>' Width="300px"></asp:TextBox>
<asp:TextBox ID="tbAnswerText" runat="server" CssClass="form" Text='<%# Eval("AnswerTitle") %>' Width="300px"></asp:TextBox>
</ItemTemplate>
</asp:DataList>
<asp:Button runat="server" ID="updateName" CssClass="button_update" style="border: 0px;" onClick="UpdateQuestionName_Click" />
<asp:Button runat="server" ID="btnDelete" Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this question?');" />
</div>
</div> <!-- end Questions -->
</div> <!-- end questionbox -->
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery(".content").hide();
});
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#man').live('click', function (event) {
jQuery('.content').toggle('show');
});
});
</script>
</ItemTemplate>
- 1 an id attribute value has to be used only once on a page. – Daxcode Commented Mar 25, 2012 at 17:52
3 Answers
Reset to default 2try this:
jQuery(document).ready(function () {
jQuery('#man').live('click', function (event) {
$(this).closest('.heading').next().toggle('show');
});
});
If you substitute the id attribute with a class value, below code change might work:
jQuery('.man').live('click', function (event) {
jQuery(this).parents().find(jQuery('.content')).toggle('show');
});
set ".content" css display:none and write this.
<script type="text/javascript">
$(document).ready(function () {
jQuery('#man').toggle(function () {
jQuery(".content").sliceDown();
}, function () {
jQuery(".content").sliceUp();
});
});
</script>