Dynamically hide JQuery UI Tabs

Question

I have a .net c# webform using the JQueryUI tabs Example as per the code below:

<script type="text/javascript">
$(function () {
    $("#tabs").tabs();
});  
</script>
<div id="tabs">
<ul>
    <li><a href="#divTab1">Tab 1</a></li>
    <li><a href="#divTab2">Tab 2</a></li>
    <li><a href="#divTab3">Tab 3</a></li>
    <li><a href="#divTab4">Tab 4</a></li>
</ul>
<div id="divTab1">
    Showing Tab 1
</div>
<div id="divTab2">
    Showing Tab 2
    </div>
    <div id="divTab3">
        Showing Tab 3
    </div>
    <div id="divTab4">
        Showing Tab 4
    </div>
</div>

What I would like to achieve, is based on a condition in my code behind, is to hide specific tabs. How would I go about doing this?

Answer 1

You can call the JQuery hide() method:

http://api.jquery.com/hide/

In code-behind, evaluate your conditions and register the hide() method invocation with ClientScriptManager.RegisterStartupScript method:

http://msdn.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.registerstartupscript.aspx