jquery ".toggle()" not working inside radwindow

[sf]

in my radwindow I have <a class="toggler" > + </a> which has a piece of javascript attached: 
$(document).ready(function() {

            $('.toggler').click(function() {
                $(this).next('.tobetoggled').toggle(400);
                $(this).text($(this).text() == '+' ? '-' : '+');
                return false;
            });
        });

This jquery is used to toggle the visibility of a div:
<div class="tobetoggled" > test div </div>


exactly same setup works on a normal .aspx page, but not on this radwindow. The radwindow is very simple, got nothing but the anchor and the div described above

any idea what I am doing wrong?
thanks in adavnce

[Shinu]

Hi,

To toggle the visibility of a div via jquery please try the following code snippet.
JS:

(function ($) {
   $(document).ready(function () {
   $('.toggler').click(function () {
     $('.tobetoggled').toggle();
      });
   });
})($telerik.$);

Note: Take a look into this documentation to use jquery in telerik.

Thanks,
Shinu.

[sf]

hi Shinu thanks for your help. I had to wrap the suggest code inside radscriptblock to get it work.

However it only works when the page is first loaded. It stops working after a postback on the page.

the controls are all inside a RadAjaxPanel, it must be the cause? any idea?

[Shinu]

Hi,

I have tried the same inside RadAjaxPanel and it worked as expected. Here is my full code.
ASPX:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
  <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
   <script type="text/javascript">
     (function ($) {
        $(document).ready(function () {
        $('.toggler').click(function () {
       $('.tobetoggled').toggle();
          });
     });
  })($telerik.$);
   </script>
  </telerik:RadScriptBlock>
 <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
 <Windows>
  <telerik:RadWindow ID="radwindow" runat="server" VisibleOnPageLoad="true">
    <ContentTemplate>
    <a id="toggler" class="toggler" style="text-decoration: underline; color: Blue">Click to Hide</a>
   <div id="testdiv" class="tobetoggled">
   Hide Me</div>
   </ContentTemplate>
 </telerik:RadWindow>
 </Windows>
 </telerik:RadWindowManager>
</telerik:RadAjaxPanel>

Thanks,
Shinu.