title: Nested asp TreeView in JQuery UI Accordion should fire event on expand
body: <p>I have a navigation iFrame on the left side and I want to fire the <code>$("#accordion").accordion("refresh");</code> event on <code>asp:TreeNode</code> (ClientExpand), so that the height of the nested <code>asp:TreeView</code> will determine the height of the surrounded DIV of the Accordion Tab of the JQuery UI Accordion.</p>
  
  <p>Is there a way to react on the expanded <code>asp:TreeView</code> with a client-sided javascript <code>$("#accordion").accordion("refresh");</code>? </p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="NavigationTree.aspx.cs" Inherits="NavigationTree" %&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head runat="server"&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;script type="text/javascript" src="js/displayToc.js"&gt;&lt;/script&gt;
          &lt;style type="text/css"&gt;
              .treeNode
              {
                  color:#666;
                  font-family:Arial,Helvetica,sans-serif;
                  font-size: 13px;
              }
              .rootNode
              {
                  color:#666;
                  font-family:Arial,Helvetica,sans-serif;
                  font-size: 13px;
              }
              .leafNode
              {
                  color:#666;
                  font-family:Arial,Helvetica,sans-serif;
                  font-size: 13px;
              }
          &lt;/style&gt;    
  
          &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
          &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
          &lt;script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="../Scripts/jquery-ui.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
  
              var zuletztSelektiert = '';
  
              $(function () {
  
                  var treeView1 = $('#&lt;%= TreeView1.ClientID %&gt;');
                  var treeNodes = treeView1.find('div[id$=Nodes]');
                  var treeImages = treeView1.find('img').not('img[alt=\'\']');
  
                  $("#searchField").keydown(function (e) {
                      if (e.keyCode == 13) {
                          $("#btnSearch").click();
                          e.preventDefault();
                      }
                  });
  
                  $("#btnSearch").click(function (event) {
  
                      var meineLinkTexte = '';
                      var parentEls = '';
  
                      treeNodes.css({ 'display': 'none' });
                      treeImages.attr('src', 'images/plus.gif')
  
                      $("a").each(function () {
                          //Do your work   
                          var selectedElement = $(this).attr('id');
                          $("#" + selectedElement).css({ 'background-color': '#FFFFFF' });
                          if ($(this).text().toLowerCase().indexOf($("#searchField").val().toLowerCase()) &gt; -1) {
  
                              $("#" + selectedElement).parents("[id$='Nodes']").css({ 'display': 'block' });
                              $("#" + selectedElement).css({ 'background-color': '#DEDEDE' });
  
                              meineLinkTexte += $(this).attr('id') + '';
                          }
                      })
  
                      event.preventDefault();
                  });
  
                  $("[id*=TreeView1] input[type=checkbox]").bind("click", function () {
  
                      var selectedStereoType = $.trim($(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1));
                      //return;
  
                      var isChecked = $(this).is(":checked");
  
                      if (isChecked) {
                          //zuletztSelektiert = zuletztSelektiert + $(this).next().text();
                          zuletztSelektiert = zuletztSelektiert + selectedStereoType;
                      }
                      else {
                          //zuletztSelektiert = zuletztSelektiert.replace($(this).next().text(), '');
                          zuletztSelektiert = zuletztSelektiert.replace(selectedStereoType, '');
                      }
  
                      if (zuletztSelektiert != '') {
                          // Welcher Stereotyp ist selektiert?
                          //var stereotype = zuletztSelektiert.substring(zuletztSelektiert.indexOf('«') + 1, zuletztSelektiert.indexOf('»'));
                          var stereotype = selectedStereoType;
                          var letzteMeldung = '';
  
                          $("[id*=TreeView1] input[type=checkbox]").each(function () {
                              //var currentStereotype = $(this).next().text().substring($(this).next().text().indexOf('«') + 1, $(this).next().text().indexOf('»'));
                              var currentStereotype = $.trim( $(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1) );
  
                              if (currentStereotype != stereotype) {
                                  var isChecked2 = $(this).is(":checked");
  
                                  if (isChecked2) {
                                      $(this).removeAttr("checked");
                                      zuletztSelektiert = zuletztSelektiert.replace($.trim( $(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1) ), '');
  
                                      letzteMeldung='It is not possible to select elements of different stereotypes. \n\n Selected Items: ' + zuletztSelektiert;
                                  }
                              }
  
                          });
  
                          if (letzteMeldung != '') alert(letzteMeldung);
  
                      }
                  });
  
                  $("#accordion").accordion({
                      collapsible: true,
                      heightStyle: "fill"
                  });
  
              })
  
              function deselectAll() {
                  $("[id*=TreeView1] input[type=checkbox]").removeAttr("checked");
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="tocInit();"&gt;
          &lt;form id="form1" runat="server"&gt;
          &lt;div&gt;
              &lt;div id="accordion"&gt;
                  &lt;h3&gt;Navigation Tree&lt;/h3&gt;
                  &lt;div&gt;
                      &lt;asp:TextBox ID="searchField" runat="server"  /&gt;
                      &lt;asp:Button ID="btnSearch"  runat="server" Text="Search" /&gt;
                      &lt;asp:TreeView ID="TreeView1" 
                              NodeStyle-CssClass="treeNode"
                              RootNodeStyle-CssClass="rootNode"
                              LeafNodeStyle-CssClass="leafNode" 
                              runat="server"&gt;
                      &lt;/asp:TreeView&gt;
                  &lt;/div&gt;
                  &lt;h3&gt;Views&lt;/h3&gt;
                  &lt;div&gt;
                      &lt;p&gt;
                          &lt;asp:Button ID="Button1" runat="server" onclick="Button1_Click" Width="210px" /&gt; &lt;br /&gt;
                          &lt;asp:Label ID="Label1" runat="server"&gt;&lt;/asp:Label&gt;&lt;br/&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>