Toggle hide in Telerik Splitter Pane using jQuery UI

[gixxer05]

jQuery toggle is not firing the show/hide in my ASP web app that uses Telerik RadSplitter Panes to organize a listbox on the left pane and jQuery tabs in the main right pane. Is ASP or Telerik interfering with the script? I couldn't ascertain the later using Firebug. The way it should work is a user will only see one tab (the other four are hidden) that will appear when a user clicks on a listbox item. Then, when a user selects/clicks one of the four tabs, a div will appear. Currently, the tabs are always shown and the div stays hidden. The toggle is not working for the div and the hide is not hiding the tabs. My code follows, showing only two tabs for this example:

<telerik:RadPane ID="LeftPane" runat="server" Width="22" Scrolling="None">
            <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22">
                <telerik:RadSlidingPane ID="Location" Title="Location" runat="server" Width="250" EnableResize="True" EnableDock="True">
                    <div id="DivCo" align="center">
                            <br />
                            <p />
                        <asp:ListBox ID="ListBox" runat="server" AutoPostBack="True" 
                                 Width="100%" Height="150px" 
                                 onselectedindexchanged="LeftNavdropdwn_SelectedIndexChanged" DataTextField="OfficeName" 
                                 DataValueField="loc_id" onclick="ListBox_SelectedItemChanged">
                        </asp:ListBox>
                                 <br />
                   <%-- darklayer div for disabling content via jQuery--%>
                        <div  id="darklayer" align="center" >
                          <p align="center">
                          <a href="javascript:$('#file_upload').uploadifive('upload')">Upload</a>
                           | 
                           <a href="javascript:$('#file_upload').uploadifive('clearQueue')">Clear Queue</a> 
                           </p>
                           <br />

                           <input id="file_upload" name="file_upload" type="file" multiple="true" width="100%"  class="filesinUpload"/>

                            <asp:TextBox ID="hiddenqueue" runat="server" ></asp:TextBox>

                        </div>

                  </div>
                 </telerik:RadSlidingPane>
               </telerik:RadSlidingZone>
             </telerik:RadPane>

 <telerik:RadPane ID="MiddlePane" runat="server" Scrolling="None">

          <%--jQuery Tabs & Gridviews--%>
          <div id="OutDiv"  style="margin:0px;border-width:0px; padding:0px;border:none;">

              <ul>

                <li><a href="#Welcometab">Welcome</a></li>

                <li><a href="#pnlAjax">Send</a></li>

              </ul>

              <telerik:RadAjaxPanel id="pnlWelcome" runat="server" height="100%" width="485px">
                  <div id="Welcometab" >

                    </div>
              </telerik:RadAjaxPanel>
           <div id="AjaxtabEvents" >

              <telerik:RadAjaxPanel ID="pnlAjax" runat="server" height="100%" width="485px">

              </telerik:RadAjaxPanel>
           </div>
         </div>
       </telerik:RadPane>
     </telerik:RadSplitter>

<script type="text/javascript">
        // Hide the file selection control until the user selects a tab. 
        $('#darklayer').hide();

        // Hide the tabs until the user makes a selection in the listbox
        $('.AjaxtabEvents').hide();

        // Show Tabs  when listbox selections are made from the listbox
        $('#<%=Listbox %>').bind('click', function (e) {

            $e.preventDefualt();
            $('.AjaxtabEvents').toggle();
        });

        // Show the controls from first click onwards, since the activeTab() value will be assigned
        // from first click onwards.  Do this for each tab in the tabcontainer
        $('.AjaxtabEvents').bind('click', function (e) {

            // If the active tab variable is empty, the user has not clicked on a tab
            if ($find('#ctl00_CenterContent_OutboundTabContainer').get_activeTab() === '') {

                $e.preventDefualt();
                $('#darklayer').toggle();
            }
            //so continue hiding 
        });
</script>

[dunfiddlin]

Fascinating. However we don't do ASP in this forum. Please contact a moderator and have this moved to the appropriate area.