nested bootstrap tab is not changing to active state while active state is changing in tablistTwitter Bootstrap Tabs: Go to Specific Tab on Page Reload or HyperlinkCollapsed Bootstrap accordion panels expanding outside DIV when openedHow to set bootstrap navbar active class with Angular JS?Change navbar color in Twitter BootstrapBootstrap Tabs PHP code blocking active tab change - WordpressBootstrap 3 Tabs Not Switching Active State ProperlyAccessiblity on Bootstrap Panelsdirect linking to nested bootstrap tabsin Dropdown multilevel menu, submenu is not stable it is disappear when iam hover
Are Boeing 737-800’s grounded?
Was there a shared-world project before "Thieves World"?
Why does processed meat contain preservatives, while canned fish needs not?
How could Tony Stark make this in Endgame?
How did Captain America manage to do this?
What do the phrase "Reeyan's seacrest" and the word "fraggle" mean in a sketch?
Examples of non trivial equivalence relations , I mean equivalence relations without the expression " same ... as" in their definition?
Do I have an "anti-research" personality?
Using a Lyapunov function to classify stability and sketching a phase portrait
Noun clause (singular all the time?)
Does a semiconductor follow Ohm's law?
Does holding a wand and speaking its command word count as V/S/M spell components?
Packing rectangles: Does rotation ever help?
Why was Germany not as successful as other Europeans in establishing overseas colonies?
How would one muzzle a full grown polar bear in the 13th century?
Rivers without rain
Why do games have consumables?
Why other Westeros houses don't use wildfire?
Binary Numbers Magic Trick
How can I place the product on a social media post better?
What makes accurate emulation of old systems a difficult task?
Error message with tabularx
Is there really no use for MD5 anymore?
How to verbalise code in Mathematica?
nested bootstrap tab is not changing to active state while active state is changing in tablist
Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or HyperlinkCollapsed Bootstrap accordion panels expanding outside DIV when openedHow to set bootstrap navbar active class with Angular JS?Change navbar color in Twitter BootstrapBootstrap Tabs PHP code blocking active tab change - WordpressBootstrap 3 Tabs Not Switching Active State ProperlyAccessiblity on Bootstrap Panelsdirect linking to nested bootstrap tabsin Dropdown multilevel menu, submenu is not stable it is disappear when iam hover
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I have main first panel with tab set 1 and second nested panel with 2 sub tabs set2 and set.
On click set 1 tab, second panel opens and shows set 2 content.
when i click set 3, i still see set 2 content when i should see set 3 content.
I see activity being changed in tablist and i can also tried to change active class from set 2 to set 3 using inspect source code and it worked but again set 3 content was showed up for set 2 content as well.
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-12 col-lg-offset-0 col-lg-12">
<div class="panel">
<div class="panel-heading">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="outer_tab1"><a id="outer_tab11" href="#outer_tab1" aria-controls="outer_tab1" role="tab" data-toggle="tab">outer_tab1 Info</a></li>
<li role="presentation" id="outer_tab2"><a href="#outer_tab2" aria-controls="outer_tab2" role="tab" data-toggle="tab">Create Complaint</a></li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="outer_tab1">
<div class="row" id="pp_row" style="display:none">
<div class="col-sm-12 col-md-offset-1 col-md-12 col-lg-offset-0 col-lg-12">
<div class="panel">
<div class="panel-heading">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="set2"><a href="#set2" aria-controls="set2" role="tab" data-toggle="tab">Set2</a></li>
<li role="presentation" id="set3"><a href="#set3" aria-controls="set3" role="tab" data-toggle="tab">set3</a></li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane " id="set2">
<div id="info" class="form-horizontal"> <br />
<div class="panel">
<div class="panel-heading">
<h2 class="panel-title"> <b>Payment & Installment Information <span style="color: #0066ff;display:block; text-align: center; font-weight: bold; margin: 10px 0 5px; font-size: 16px;"></span></b> </h2>
</div>
<div class=" panel-body table-responsive option-content is-hidden">
<div id="mem_table" width="550px" align="center"> </div>
</td>
</div>
<!----subpanel--->
</div>
<!----panel--->
</div>
<!----div pp member--->
</div>
<div role="tabpanel" class="tab-pane active " id="set3">
<div id="set3_table" class="form-horizontal" style="display:block"> <br />
<div class="panel">
<div class="panel-heading">
<h2 class="panel-title"> <b>set3 Status <span style="color: #0066ff;display:block; text-align: center; font-weight: bold; margin: 10px 0 5px; font-size: 16px;"></span></b> </h2>
</div>
<div class="panel-body table-responsive option-content is-hidden">
</div>
<!----subpanel--->
</div>
<!----panel--->
</div>
<!----div "set3"member--->
</div>
</div>
<!----tabcontent---->
</div>
<!----div panel--->
</div>
</div>
<!----div col---->
</div>
<!---row--->
</div>
</div>
<!----div col---->
</div>
<!---row--->
</div>
twitter-bootstrap bootstrap-tabs activestate
edited Mar 22 at 18:55
brooksrelyt
1,82621323
asked Mar 22 at 18:24
programmergeekyprogrammergeeky
105
add a comment |
I have main first panel with tab set 1 and second nested panel with 2 sub tabs set2 and set.
On click set 1 tab, second panel opens and shows set 2 content.
when i click set 3, i still see set 2 content when i should see set 3 content.
I see activity being changed in tablist and i can also tried to change active class from set 2 to set 3 using inspect source code and it worked but again set 3 content was showed up for set 2 content as well.
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-12 col-lg-offset-0 col-lg-12">
<div class="panel">
<div class="panel-heading">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="outer_tab1"><a id="outer_tab11" href="#outer_tab1" aria-controls="outer_tab1" role="tab" data-toggle="tab">outer_tab1 Info</a></li>
<li role="presentation" id="outer_tab2"><a href="#outer_tab2" aria-controls="outer_tab2" role="tab" data-toggle="tab">Create Complaint</a></li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="outer_tab1">
<div class="row" id="pp_row" style="display:none">
<div class="col-sm-12 col-md-offset-1 col-md-12 col-lg-offset-0 col-lg-12">
<div class="panel">
<div class="panel-heading">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="set2"><a href="#set2" aria-controls="set2" role="tab" data-toggle="tab">Set2</a></li>
<li role="presentation" id="set3"><a href="#set3" aria-controls="set3" role="tab" data-toggle="tab">set3</a></li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane " id="set2">
<div id="info" class="form-horizontal"> <br />
<div class="panel">
<div class="panel-heading">
<h2 class="panel-title"> <b>Payment & Installment Information <span style="color: #0066ff;display:block; text-align: center; font-weight: bold; margin: 10px 0 5px; font-size: 16px;"></span></b> </h2>
</div>
<div class=" panel-body table-responsive option-content is-hidden">
<div id="mem_table" width="550px" align="center"> </div>
</td>
</div>
<!----subpanel--->
</div>
<!----panel--->
</div>
<!----div pp member--->
</div>
<div role="tabpanel" class="tab-pane active " id="set3">
<div id="set3_table" class="form-horizontal" style="display:block"> <br />
<div class="panel">
<div class="panel-heading">
<h2 class="panel-title"> <b>set3 Status <span style="color: #0066ff;display:block; text-align: center; font-weight: bold; margin: 10px 0 5px; font-size: 16px;"></span></b> </h2>
</div>
<div class="panel-body table-responsive option-content is-hidden">
</div>
<!----subpanel--->
</div>
<!----panel--->
</div>
<!----div "set3"member--->
</div>
</div>
<!----tabcontent---->
</div>
<!----div panel--->
</div>
</div>
<!----div col---->
</div>
<!---row--->
</div>
</div>
<!----div col---->
</div>
<!---row--->
</div>
twitter-bootstrap bootstrap-tabs activestate
edited Mar 22 at 18:55
brooksrelyt
1,82621323
asked Mar 22 at 18:24
programmergeekyprogrammergeeky
105
add a comment |
I have main first panel with tab set 1 and second nested panel with 2 sub tabs set2 and set.
On click set 1 tab, second panel opens and shows set 2 content.
when i click set 3, i still see set 2 content when i should see set 3 content.
I see activity being changed in tablist and i can also tried to change active class from set 2 to set 3 using inspect source code and it worked but again set 3 content was showed up for set 2 content as well.
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-12 col-lg-offset-0 col-lg-12">
<div class="panel">
<div class="panel-heading">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="outer_tab1"><a id="outer_tab11" href="#outer_tab1" aria-controls="outer_tab1" role="tab" data-toggle="tab">outer_tab1 Info</a></li>
<li role="presentation" id="outer_tab2"><a href="#outer_tab2" aria-controls="outer_tab2" role="tab" data-toggle="tab">Create Complaint</a></li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="outer_tab1">
<div class="row" id="pp_row" style="display:none">
<div class="col-sm-12 col-md-offset-1 col-md-12 col-lg-offset-0 col-lg-12">
<div class="panel">
<div class="panel-heading">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="set2"><a href="#set2" aria-controls="set2" role="tab" data-toggle="tab">Set2</a></li>
<li role="presentation" id="set3"><a href="#set3" aria-controls="set3" role="tab" data-toggle="tab">set3</a></li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane " id="set2">
<div id="info" class="form-horizontal"> <br />
<div class="panel">
<div class="panel-heading">
<h2 class="panel-title"> <b>Payment & Installment Information <span style="color: #0066ff;display:block; text-align: center; font-weight: bold; margin: 10px 0 5px; font-size: 16px;"></span></b> </h2>
</div>
<div class=" panel-body table-responsive option-content is-hidden">
<div id="mem_table" width="550px" align="center"> </div>
</td>
</div>
<!----subpanel--->
</div>
<!----panel--->
</div>
<!----div pp member--->
</div>
<div role="tabpanel" class="tab-pane active " id="set3">
<div id="set3_table" class="form-horizontal" style="display:block"> <br />
<div class="panel">
<div class="panel-heading">
<h2 class="panel-title"> <b>set3 Status <span style="color: #0066ff;display:block; text-align: center; font-weight: bold; margin: 10px 0 5px; font-size: 16px;"></span></b> </h2>
</div>
<div class="panel-body table-responsive option-content is-hidden">
</div>
<!----subpanel--->
</div>
<!----panel--->
</div>
<!----div "set3"member--->
</div>
</div>
<!----tabcontent---->
</div>
<!----div panel--->
</div>
</div>
<!----div col---->
</div>
<!---row--->
</div>
</div>
<!----div col---->
</div>
<!---row--->
</div>
twitter-bootstrap bootstrap-tabs activestate
edited Mar 22 at 18:55
brooksrelyt
1,82621323
asked Mar 22 at 18:24
programmergeekyprogrammergeeky
105
I have main first panel with tab set 1 and second nested panel with 2 sub tabs set2 and set.
On click set 1 tab, second panel opens and shows set 2 content.
when i click set 3, i still see set 2 content when i should see set 3 content.
I see activity being changed in tablist and i can also tried to change active class from set 2 to set 3 using inspect source code and it worked but again set 3 content was showed up for set 2 content as well.
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-12 col-lg-offset-0 col-lg-12">
<div class="panel">
<div class="panel-heading">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="outer_tab1"><a id="outer_tab11" href="#outer_tab1" aria-controls="outer_tab1" role="tab" data-toggle="tab">outer_tab1 Info</a></li>
<li role="presentation" id="outer_tab2"><a href="#outer_tab2" aria-controls="outer_tab2" role="tab" data-toggle="tab">Create Complaint</a></li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="outer_tab1">
<div class="row" id="pp_row" style="display:none">
<div class="col-sm-12 col-md-offset-1 col-md-12 col-lg-offset-0 col-lg-12">
<div class="panel">
<div class="panel-heading">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="set2"><a href="#set2" aria-controls="set2" role="tab" data-toggle="tab">Set2</a></li>
<li role="presentation" id="set3"><a href="#set3" aria-controls="set3" role="tab" data-toggle="tab">set3</a></li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane " id="set2">
<div id="info" class="form-horizontal"> <br />
<div class="panel">
<div class="panel-heading">
<h2 class="panel-title"> <b>Payment & Installment Information <span style="color: #0066ff;display:block; text-align: center; font-weight: bold; margin: 10px 0 5px; font-size: 16px;"></span></b> </h2>
</div>
<div class=" panel-body table-responsive option-content is-hidden">
<div id="mem_table" width="550px" align="center"> </div>
</td>
</div>
<!----subpanel--->
</div>
<!----panel--->
</div>
<!----div pp member--->
</div>
<div role="tabpanel" class="tab-pane active " id="set3">
<div id="set3_table" class="form-horizontal" style="display:block"> <br />
<div class="panel">
<div class="panel-heading">
<h2 class="panel-title"> <b>set3 Status <span style="color: #0066ff;display:block; text-align: center; font-weight: bold; margin: 10px 0 5px; font-size: 16px;"></span></b> </h2>
</div>
<div class="panel-body table-responsive option-content is-hidden">
</div>
<!----subpanel--->
</div>
<!----panel--->
</div>
<!----div "set3"member--->
</div>
</div>
<!----tabcontent---->
</div>
<!----div panel--->
</div>
</div>
<!----div col---->
</div>
<!---row--->
</div>
</div>
<!----div col---->
</div>
<!---row--->
</div>
twitter-bootstrap bootstrap-tabs activestate
twitter-bootstrap bootstrap-tabs activestate
edited Mar 22 at 18:55
brooksrelyt
1,82621323
asked Mar 22 at 18:24
programmergeekyprogrammergeeky
105
edited Mar 22 at 18:55
brooksrelyt
1,82621323
asked Mar 22 at 18:24
programmergeekyprogrammergeeky
105
edited Mar 22 at 18:55
brooksrelyt
1,82621323
edited Mar 22 at 18:55
brooksrelyt
1,82621323
edited Mar 22 at 18:55
brooksrelyt
1,82621323
1,82621323
asked Mar 22 at 18:24
programmergeekyprogrammergeeky
105
asked Mar 22 at 18:24
programmergeekyprogrammergeeky
105
asked Mar 22 at 18:24
programmergeekyprogrammergeeky
105
105
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55305741%2fnested-bootstrap-tab-is-not-changing-to-active-state-while-active-state-is-chang%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55305741%2fnested-bootstrap-tab-is-not-changing-to-active-state-while-active-state-is-chang%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown