Problem in making a jquery tab visible and invisible with Css class in asp.net master page

I've set of jquery tabs on my asp.net master page as follows.

<ul>            
                    <li <%= Session["CurrentTab"] == "Firsttab" ? "class=\"current\"" : "" %>><a href="First.aspx">First</a></li>
                    <li <%= Session["CurrentTab"] == "Secondtab" ? "class=\"current\"" : "" %>><a href="Second.aspx">Second</a></li>
                    <li <%= Session["CurrentTab"] == "Thirdtab" ? "class=\"current\"" : "" %>><a href="Third.aspx">Third</a></li>
                    <li <%= Session["CurrentTab"] == "Fourthtab" ? "class=\"current\"" : "" %>开发者_开发技巧><a href="Fourth.aspx">Fourth</a></li>
                    <li id="bsearch" style="margin-left:500px" class=<%= Session["CurrentTab"] == "Fifthtab" ? "current" : "hide" %>><a href="Fifth.aspx">Fifth <asp:Literal ID="Lblcount" runat="server" Visible="false"></asp:Literal><span id="removebtn" class="removetab ui-icon ui-icon-circle-close" style="float:right; margin: -2px -10px 0px 3px; cursor:pointer;"></span></a></li>

                </ul>

these tabs work in jquery ajax mode.I am setting the session["CurrentTab"] value in the page load of First.aspx,Second.aspx,Third.aspx,Fourth.aspx,Fifth.aspx pages to corresponding values.Based on this value the respective tab is highlighted when clicked on that particular page.the first 4 tabs(First,Second,third,Fourth) will be visible by default,whereas Fifth tab is invisible.

I have a search button on the master page clicking on which from any page will redirect the user to Fifth.aspx where I am making the Fifth tab visible too .

This fifth tab should be closable upon clicking the 'x' that appears next to the tab title.

Once this fifth tab is visible unless the user clicks on 'x' it should be left visible along with the other tabs on all the pages(First.aspx,Second.aspx,Third.aspx,Fourth.aspx, Fifth.aspx).But currently if I leave the fifth.aspx page and navigate to other pages 'Fifth' tab is becoming invisible because the session["CurrentTab"] is no longer set to "Fifthtab" and the tab is being hidden according to class=<%= Session["CurrentTab"] == "Fifthtab" ? "current" : "hide" %> the session I am writing for this tab.

I want to replace the class with something like this

 class=<%= Session["CurrentTab"] == "Fifthtab" ? "current" : "default" %>

where 'default' corresponds to style="display:block";

I tried to do that in the search button click of master page using javascript but its not working.

Could someone please help me achieve this?

Thanks.

One way out is to use hidden field for saving the status of fifth tab. So as soon as the fifth tab is visible set the hidden variable. Similarly when the user clicks on the x button set the variable.

You can access the hidden variable named 'hdnFifthTabStatus' as

$('input[id$="hdnFifthTabStatus"]').val();  

Now if this is true: add display:block to fifth tab css, else add display:none.

This is obviously really late, but here's a simple hack I recently used.

So you can achieve hiding the tab by just simply using CSS Display attribute.

display: none;

In an inline style is more than enough inside your list element.

<li style="display:none;"><a href="SomeTargetView">Example</a></li>

Now let's define your search button that will link to a JavaScript function. This function in-turn will activate your tab.

Here's the code for your search button:

<a href="javascript:;" onclick="tabActivator()" class="some button classes">Edit my profile</a>

Now, to achieve the activation of a specific tab on-click we can write a little JavaScript function.

function tabActivator(){
    $("#tabs").tabs("option", "active", 4);
    return false;
}

Here we activate the 5th tab counting from 0, hence 4.

So for your specific case I guess the Button and JS Function are as provided, but the list would look like this:

<ul>
    <li <%= Session["CurrentTab"] == "Firsttab" ? "class=\"current\"" : "" %>><a href="First.aspx">First</a></li>
    <li <%= Session["CurrentTab"] == "Secondtab" ? "class=\"current\"" : "" %>><a href="Second.aspx">Second</a></li>
    <li <%= Session["CurrentTab"] == "Thirdtab" ? "class=\"current\"" : "" %>><a href="Third.aspx">Third</a></li>
    <li <%= Session["CurrentTab"] == "Fourthtab" ? "class=\"current\"" : "" %>><a href="Fourth.aspx">Fourth</a></li>
    <li style="display:none;"<%= Session["CurrentTab"] == "Fifthtab" ? "class=\"current\"" : "" %>><a href="Fifth.aspx">Fifth</a></li>
</ul>

The code to hide and reveal your search box can be done with some JavaScript within the same function provided above.

Perhaps you don't really need this answer anymore but anyone who wants to activate a hidden tab from within a tab can do it like this.