Accordion not working properly
I have to show some functionality similar to accordion that is of jquery so i made a custom function of jquery to produce the effect.
there is a grid view in which there are two div's here is the code.
<asp:GridView ID="grdAccordion" runat="server" AutoGenerateColumns="false" Width="200px">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div class="myFirstDiv" onclick="testToggle(this)">
<%#Eval("Name")%>
<div class="mySecondDiv" style="display:none">
<%#Eval("Person_Name")%>
</div>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The second div has style property display none. by default all the div are closed.
than i have made a js function that uses the toggle function to perform the action code.
function testToggle(testDiv) {
debugger
var sntHdnValue = $('#hdnSetFlag').val();
if (sntHdnValue == 1) {
开发者_如何转开发 $(testDiv).find('div:first').show().attr('isOpen', 'true');
}
else {
$(testDiv)
.parents('table:first')
.find('div[isOpen=true]').removeAttr('isOpen').toggle('slow');
$(testDiv).find('div:first').show().attr('isOpen', 'true');
}
sntHdnValue++;
$('#hdnSetFlag').val(sntHdnValue);
}
here i have made use of the hidden field that let's me know that it is the initial state every thing is closed i am adding a custom attr isopen for my identification
1)the current situation is this At load everty thing should be closed. 2)than at a time only single div should be open.
this is working fine.
The problem is if i click on the same div that i clicked to open than it has two custom attr isopen now it breaks the second case. how to solve it.
Got the work around.
updated functions.
var glDivID = 0;
function testToggle(testDiv) {
debugger
var sntHdnValue = $('#hdnSetFlag').val();
var dvID = $(testDiv).attr('id');
if (sntHdnValue == 1) {
$(testDiv).find('div:first').show().attr('isOpen', 'true');
}
else {
$(testDiv)
.parents('table:first')
.find('div[isOpen=true]').removeAttr('isOpen').toggle('slow');
if (glDivID != dvID) {
$(testDiv).find('div:first').show().attr('isOpen', 'true');
}
}
sntHdnValue++;
$('#hdnSetFlag').val(sntHdnValue);
glDivID = dvID;
}
i appended an id at the time of adding data to the grid.checked the same for testing whether it is a self clicked or not it does the trick
精彩评论