JQuery Tabs Display Question - I need to display content not related to the 4 tabs(i.e. login/registration)

I have 4 JQuery Tabs in an ASP.Net MVC 3 appication. All tabs display correct content when tabs are clicked. However, I want to display Login/Registration content when a user clicks the Login/Registration link at the top of the UI page. The login/reg should display underneath the 4 tabs with none of the tab content. So the tabs need to remain visible. Although, none of them would be selected.

The problem is, both the tab content and the login/registration content shows at the same time. I need only the login/reg content that is unrelated to the tabs to display. I also need all tabs to be unselected. Any help is appreciated!

  <script type="text/javascript">
     $(function () {            
        $('#tabs').tabs();
     });
 </script>       

<div id="menu" style=" background-color:White; width:1024px; height:auto; float:left;">

            <!-- Must have class= info to prevent flash of just content on refresh -->
            <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style=" position:relative; border:0px;"   >
                <ul class="ui-tabs-nav">                        
                    <li><a href="#tabs-1" >Home</a></li>
                    <li><a href="#tabs-2" >Statistics</a></li>
                    <li><a href="#tabs-3" >Topo Maps</a></li>
                    <li><a href="#tabs-4" >FAQs</a></li>
                </ul>
                <div id="tabs-1" class="ui-tabs-hide ui-tabs-panel ">@Html.Partial("../Home/Home") </div>
                <div id="tabs-2" class="ui-tabs-hide ui-tabs-panel ">@Html.Partial("../Statistics/Statistics")</div>
                <div id="tabs-3" class="ui-tabs-hide ui-tabs-panel ">@Html.Partial("../Maps/Maps")</div>
                <div id="tabs-4" class="ui-tabs-hide ui-tabs-panel "&开发者_如何学Pythongt;@Html.Partial("../Home/FAQs")</div>
            </div>

        </div>

---

Here you have an example http://jsfiddle.net/YnZRa/1/

Steps

1. Add a new tab with <li style="display:none;"><a href="#tabs-4">Tab 4</a></li>
2. Add the content in a new div

3. Edit the script with this

   //Edit the script this way to show the content with a click in a link
   
   $(document).ready(function(){
   
   var $tabs = $( "#tabs" ).tabs();
   
   $('.goto').click(function() { // bind click event to link
       $tabs.tabs('select', 3); // switch to fourth tab
       return false;
   });
   });
   

   Hope it works!! :)

---

If I understand your question correctly, you'd like to collapse your tab content when a user is trying to login/register. First things first, you must set the tabs options to be collapsable. So, edit your tabs calls to reflect this

$('#tabs').tabs({ collapsible: true });

From here, you can attach an event handler to your login/registration click event. You'll want to do two things, 1) get the currently selected tab index and 2) fire the tab select event to collapse your tabs. It might look something like this:

$('.login').click(function () {
        var tabIdx = $( "#tabs" ).tabs( "option", "selected" );
        $("#tabs").tabs( "select" , tabIdx); //collapse the currently selected tab

        // continue with your login/registration click event
});