Accordion not working properly

Question

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.

Answer 1

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