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.
EdAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.