Hide/Show SearchBox from javascript

[Mickael]

Hi,

I am trying to toggle the visibility of a searchbox on my page using a button.
but for some reason the searchbox never disappear.

<asp:ImageButton
    ImageUrl="Images/zoom-search-2-icon.png"
    AlternateText="Search"
    ToolTip="Search"
    Height="32"
    Width="32"
    runat="server"
    CssClass="iconImageStyle"
    OnClientClick="Search_Click()" />

<telerik:RadSearchBox
    ID="CmbBx_Search"
    runat="server"
    Width="550px"
    EmptyMessage="Search..."
    OnClientSearch="PerformSearch"
    ShowSearchButton="true">
    <DropDownSettings Height="400" Width="300" />
    <WebServiceSettings Path="Main.aspx" Method="GetResults" />
</telerik:RadSearchBox>

<script type='text/javascript'>
    function Search_Click() {
        toggle_visibility('CmbBx_Search');
    }

    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if (e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
    }
</script>

From the code behind if I change the Visibility, it works.
But I do not want to do this from the code behind. I need to do it from client-side javascript.

[Dimitar Terziev]

Hello,

You could use the following implementation of the toggle_visibility function:

function toggle_visibility(id) {
   $telerik.$("#"+ id).toggle();
 }

Regards,
Dimitar Terziev
Telerik

 

 

[Mickael]

Even with your code I could not get it to work, so I investigated the page behaviour instead.
In the end I had to switch from the asp:ImageButton to a simple 'img' with a 'onclick' because what happened was that the ImageButton was doing a postback and thus cancelling the visilibity toggle.

Thanks for your help.