I have 3 accordion divs on a webform. They all use the same javascript function (jquery based) to open up each div resepectively. When I open up an accordian it displays a few buttons and a usercontrol. The usercontrol contains a gridview which gets populated on demand by the click event of one of the buttons on that div. I need now to execute that click event of the respective button that loads the data for each gridview when I click on the accordion div -- making the accordion the on-demand button. Below is the markup for the 3 divs (and all the markup inside each div) and also the javascript function that the accordian divs use. Inside that javascript function I reference one of the load data buttons (the button on the 2nd div accordian) and execute its click event. This works fine and that gridview gets populated as soon as I click on that accordion div. What I need to do is to determine which div accordian was clicked and then set up and if-else code block so that I can execute the click event for any the the 3 load data buttons on the 3 accordian divs to populate the respective gridview on demand. So, based on the code below is there a way to determine which div accordian was clicked so that I can execute only the click event for the load data button on that div? All the divs have IDs (including the sub divs)
<%@ Register TagPrefix="uc" TagName="BoardDefaultControlTest" Src="BoardDefaultControlTest.ascx" %><%@ Register TagPrefix="uc2" TagName="BoardDefaultControl2" Src="BoardDefaultControl2.ascx" %>
...<div class="collapsible" id="divA"> <asp:UpdatePanel style="font-size:12px;" runat="server"><contenttemplate> <b>► Executives to Assess (Assigned to Panel Member) (<%=Me.cntPnlMemRat%>/<%=Me.cntPnlMember%>)</b></contenttemplate></asp:UpdatePanel> <div id="div1ss" runat="server"><asp:UpdatePanel runat="server"><contenttemplate><div id="Div0" align="right" runat="server"><asp:ImageButton ID="DefaultImageButton1Atest" OnClick="DefaultButton1Test_Click" Enabled="True" CssClass="panel_long_button" SkinID="ApplyDefaultButton" runat="server"/></div> <asp:Button runat="server" Style="display:ruby" ID="btnNew3" Text="get Panel Member Data" OnClick="LoadPanelMember_Click" /> <uc:BoardDefaultControlTest ID="LoadPanelMember" runat="server" PnlTest="3" prpBin="panelmember" /></contenttemplate></asp:UpdatePanel></div> </div><div class="collapsible" id="divB"> <asp:UpdatePanel style="font-size:12px;" runat="server"><contenttemplate> <b>► Executives to Assess (<%=Me.cntExecRating%>/<%=Me.cntExecs%>)</b></contenttemplate></asp:UpdatePanel><div><asp:UpdatePanel runat="server"><contenttemplate><div id="Div1" align="right" runat="server"><asp:ImageButton ID="DefaultImageButton2Atest" OnClick="DefaultButton2Test_Click" Enabled="True" CssClass="panel_long_button" SkinID="ApplyDefaultButton" runat="server"/></div><asp:Button runat="server" Style="display:normal" ID="btnNew2" Text="get Required Member Data" OnClick="LoadRequired_Click" /> <uc2:BoardDefaultControl2 ID="LoadRequired" runat="server" PnlTest="2" prpBin="required" /></contenttemplate></asp:UpdatePanel></div></div> <div class="collapsible" id="divC"> <h3>Executives Without an Endorsed Assessment (<%=Me.cntEndorse_Rate%>/<%=Me.cntEndorse%>)</h3> <div><asp:UpdatePanel runat="server"><ContentTemplate><div id="Div2" runat="server"><asp:Button runat="server" Style="display:normal" ID="btnNew1" Text="get UnEndorsed Member Data" OnClick="LoadUnEndorsed_Click" /> </div><uc:BoardDefaultControlTest ID="LoadUnEndorsed" runat="server" PnlTest="1" prpBin="unendorsed" /></ContentTemplate></asp:UpdatePanel></div> </div> <br /><br /><br /><%--/// <reference path="../../ScriptLibrary/jquery-1.11.0-vsdoc.js" />--%><script type="text/javascript">$(document).ready(function () {$(".collapsible").accordion({ collapsible: true, active: false, heightStyle: "content" });$(".position").accordion({
collapsible: true,
active: false,
heightStyle: "content",
icons: false,
beforeActivate: function (event, ui) { BeforeActivate(event, ui); }
});
//--here I want to add an if-elseif-else block based on which accordian div was clicked
//--so that I don't click/load data from all 3 buttons at once
//--how to determine from this javascript code which accordian div was clicked?
var button = document.getElementById('<%= DefaultImageButton2Atest.ClientID%>'); //--this is the button from the 2nd accordian div
button.click();
});</script>