asked on

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.

ASKER CERTIFIED SOLUTION

Lokesh B R

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

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.

Lokesh B R

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?

ASKER

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

ASKER

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.

Lokesh B R

Hi,

glad it worked..!!!

ASKER

thanks for your help, you pointed me in the right direction..