How to Hide Rad Splitter from Client

[Eric]

Hello

I want to HIDE & SHOW Rad Splitter from Client using jQuery, how do I achieve that?

[Vessy]

Hi Eric,

A way to hide the Splitter with jQuery is to add/remode a CSS class to it, whenever you want its displayed mode to be changed:

<asp:Button ID="button1" runat="server" Text="Hide Splitter" OnClientClick="HideSplitter(); return false;"/>
<asp:Button ID="button2" runat="server" Text="Show Splitter" OnClientClick="ShowSplitter(); return false;"/>
<telerik:RadSplitter ID="radsplitter1" runat="server" Width="900px" Height="700px">
    <telerik:RadPane ID="RadPane1" runat="server"></telerik:RadPane>
    <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane>
</telerik:RadSplitter>
<script type="text/javascript">
    function HideSplitter() {
        $telerik.$("#radsplitter1").removeClass("shown");
        $telerik.$("#radsplitter1").addClass("hidden");
    }
    function ShowSplitter() {
        $telerik.$("#radsplitter1").removeClass("hidden");
        $telerik.$("#radsplitter1").addClass("shown");
    }
</script>

CSS:

.hidden
{
    display:none;
}
.shown
{
    display:block;
}

Nevertheless, I highly recommend you to use the Splitter's Client-side API in order to achieve this functionality:

<telerik:RadSplitter ID="radsplitter1" runat="server" Width="900px" Height="700px">
    <telerik:RadPane ID="RadPane1" runat="server"></telerik:RadPane>
    <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane>
</telerik:RadSplitter>
<script type="text/javascript">
    function HideSplitter() {
        var splitter = $find("<%=radsplitter1.ClientID %>");
        splitter.set_visible(false);
    }
    function ShowSplitter() {
        var splitter = $find("<%=radsplitter1.ClientID %>");
        splitter.set_visible(true);
    }
</script>

I hope this information would be helpful for you.

Kind Regards,
Veselina Raykova
the Telerik team