• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3175
  • Last Modified:

Hide Bootstrap Tab Panes

Hi

I want to hide or show tab panes depending on the value of a session or a querystring (asp.net vb)

<section id="NavPanel1" runat="server" class="panel">
            <header class="panel-heading tab-bg-dark-navy-blue ">
                <ul id="tabnumberchoose" runat="server" class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#iqa">IQA</a> </li>
                    <li class=""><a data-toggle="tab" href="#sp">Shadow Profiles</a> </li>
                    <li class=""><a data-toggle="tab" href="#siqa">Submitted For IQA</a></li>
  
                </ul>
            </header>
            <div class="panel-body">
                <div class="tab-content">
                    <div id="iqa" class="tab-pane active">
              
                    </div>
                    <div id="sp" class="tab-pane">
                    </div>
                    <div id="siqa" class="tab-pane">
                        <div class="col-lg-6">
                        </div>
                    </div>

                    </div>
            </div>
        </section>

Open in new window

Doers anyone know the best way to achieve this.

I've tried giving  <li> an ID and running at server (visible or not)   but that does not work.
0
Ed
Asked:
Ed
  • 4
  • 3
1 Solution
 
Lokesh B RDeveloperCommented:
Hi,

You need to add the ID & Runat="server" to both the <li> & <div> tags as follows.
 Make both <li> & <div> Visible properties to "False/True" based on your conditions.


 
<section id="NavPanel1" runat="server" class="panel">
            <header class="panel-heading tab-bg-dark-navy-blue ">
                <ul id="tabnumberchoose" runat="server" class="nav nav-tabs">
                    <li class="active" id="a1" runat="server"><a data-toggle="tab" href="#iqa">IQA</a> </li>
                    <li class=""><a id="a2" runat="server" data-toggle="tab" href="#sp">Shadow Profiles</a> </li>
                    <li class=""><a id="a3" runat="server" data-toggle="tab" href="#siqa">Submitted For IQA</a></li>

                </ul>
            </header>
            <div class="panel-body">
                <div class="tab-content">
                    <div id="iqa" runat="server" class="tab-pane active">
                        gfdg
                    </div>
                    <div id="sp" runat="server" class="tab-pane">
                        gfdgdfg
                    </div>
                    <div id="siqa" runat="server" class="tab-pane">
                        <div class="col-lg-6">
                            gfdgfdg
                        </div>
                    </div>

                </div>
            </div>
        </section>

Open in new window



In .Vb File you can check for the QueryStrign/Session as below.

Protected Sub Page_Load(sender As Object, e As EventArgs)

	If Request.QueryString("iqa") IsNot Nothing AndAlso Request.QueryString("iqa").ToString() = "iqa" Then
		iqa.Visible = False
		a1.Visible = False
	End If
End Sub

Open in new window

0
 
EdAuthor Commented:
Thanks

Well that does work sort of. It does hide the panel as intended but the tabs after the hidden tab now does not function as intended displaying the wrong panel.
0
 
Lokesh B RDeveloperCommented:
Hi,

I don't think it will show the wrong panel because they are related with their ID's which are unique.

   <ul id="tabnumberchoose" runat="server" class="nav nav-tabs">
                    <li class="active" id="a1" runat="server"><a data-toggle="tab" href="#iqa">IQA</a> </li>
                    <li class=""><a id="a2" runat="server" data-toggle="tab" href="#sp">Shadow Profiles</a> </li>
                    <li class=""><a id="a3" runat="server" data-toggle="tab" href="#siqa">Submitted For IQA</a></li>
                </ul>

When you click on IQA, it will open div with ID="iqa" and so on..

can you post the screenshot to understand what is going on?
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
EdAuthor Commented:
ok just found the problem.  

The hiding of tabs works with ID and runat = server.

However, the Nav tabs start to not work correctly when you runat server the DIV tag(even though it hides as intended.

eg

When I add this(no codebehend)
<div id="gcomments" class="tab-pane" runat="server">
                                   Tab content
                                    
                                    </div>

Open in new window


The content of the tab is not displayed when you click on the tab header. Its just blank.

when I take the runat="server">  part out it funtions as normal.

So if I can find out why runat="server">  is causing problems when added to this  
<div id="gcomments" class="tab-pane" runat="server">
                                   Tab content
                                    
                                    </div>

Open in new window



I'll be able to hide/unhide tab panels.

Try it, add a runat =server to the div for a tab pane and you'll see what I mean.

cheers

Thanks
0
 
EdAuthor Commented:
I ignored the div

and just ran the li at server

   <li class="" id="GradingComments" runat="server">
                            <a data-toggle="tab" href="#gcomments">Grading & Comments</a>
                        </li>

then in the code behind

   GradingComments.Visible = False

and than worked and the other tabs appeared fine.
0
 
Lokesh B RDeveloperCommented:
Hi,

glad it worked..!!!
0
 
EdAuthor Commented:
thanks for your help, you pointed me in the right direction..
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now