Question

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 ">@Html.Partial("../Home/FAQs")</div>
            </div>

        </div>

Answer 1

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!! 🙂