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

Question

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.

Answer 1

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.