Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.
Solved
How to keep parent tab selected when nested tab is clicked?
Posted on 2016-09-28
Experts,
I am using the jQueryMobile framework.
I'm nesting tabs using the code below. When clicked the "Facility" tab reveals the nested tabs and loads the content for the "Source 1" tab.
The issue I am trying to solve is two fold:
1) I want to make sure that the "Source 1" tab is activated when the "Facility" tab is selected because the "Source 1" content loads by default.
2) If any of the nested tabs are selected (Source 1, Source 2, Source 3,...Source 7) I want to ensure the "Facility" tab remains selected.
I assume that this is best done by modifying the CSS with jQuery but, I am not sure.
Any help would be appreciated.
I am using the jQueryMobile framework.
I'm nesting tabs using the code below. When clicked the "Facility" tab reveals the nested tabs and loads the content for the "Source 1" tab.
The issue I am trying to solve is two fold:
1) I want to make sure that the "Source 1" tab is activated when the "Facility" tab is selected because the "Source 1" content loads by default.
2) If any of the nested tabs are selected (Source 1, Source 2, Source 3,...Source 7) I want to ensure the "Facility" tab remains selected.
I assume that this is best done by modifying the CSS with jQuery but, I am not sure.
Any help would be appreciated.
<!-- TAB CONTENT -->
<div data-role="tabs" id="tabs">
<!-- MAIN HEADER NAVIAGATION -->
<div data-role="navbar">
<ul>
<li><a href="scripts/content.php?by_source" data-ajax="false" class="ui-btn-active">Resource</a></li>
<li><a href="#facility" data-ajax="false" id="departments_by_facility_tab">Facility</a></li>
</ul>
</div>
<!-- END MAIN HEADER NAVIGATION -->
<!-- FACILITY TAB -->
<div id="facility">
<div data-role="tabs" id="facility_tabs">
<div data-role="navbar">
<ul>
<li><a href="scripts/content.php?source=1" data-ajax="false" class="ui-btn ui-shadow">Source 1</a></li>
<li><a href="scripts/content.php?source=2" data-ajax="false" class="ui-btn ui-shadow">Source 2</a></li>
<li><a href="scripts/content.php?source=3" data-ajax="false" class="ui-btn ui-shadow">Source 3</a></li>
<li><a href="scripts/content.php?source=4" data-ajax="false" class="ui-btn ui-shadow">Source 4</a></li>
<li><a href="scripts/content.php?source=5" data-ajax="false" class="ui-btn ui-shadow">Source 5</a></li>
<li><a href="scripts/content.php?source=6" data-ajax="false" class="ui-btn ui-shadow">Source 6</a></li>
<li id="mdo_tab"><a href="scripts/content.php?source=7" data-ajax="false" class="ui-btn ui-shadow">Source 7</a></li>
</ul>
</div>
</div>
</div>
<!-- END FACILITY TAB -->
</div>
<!-- END TAB CONTENT -->
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
4-
4
8 Comments
Active today
Not sure I understand the problem
1) Source 1 will be selected for Facility - what am I missing
2) When selecting sub tabs Facility remains selected - again what am I missing?
1) Source 1 will be selected for Facility - what am I missing
2) When selecting sub tabs Facility remains selected - again what am I missing?
@Julian:
Sorry...here is a fiddle to show what I am speaking of: Fiddle
When the "Facility" tab is clicked for the first time after page load it does two things:
- Activates and turns blue
- Loads the nested tabs (Source 1, Source 2, etc.)
When the "Facility" tab is clicked for the first time after page load it should also do the following:
- Activate the Source 1 tab because the Source 1 tab content displays by default when the nested tabs are initialized for the first time.
Additionally, when any of the nested tabs are selected the "Facility" tab loses its activated state. I want it to stay activated.
Sorry...here is a fiddle to show what I am speaking of: Fiddle
When the "Facility" tab is clicked for the first time after page load it does two things:
- Activates and turns blue
- Loads the nested tabs (Source 1, Source 2, etc.)
When the "Facility" tab is clicked for the first time after page load it should also do the following:
- Activate the Source 1 tab because the Source 1 tab content displays by default when the nested tabs are initialized for the first time.
Additionally, when any of the nested tabs are selected the "Facility" tab loses its activated state. I want it to stay activated.
Active today
I put this sample together based on your OP - Is that what you are referring to about the tabs staying activated?
I still don't understand this bit
I still don't understand this bit
- Activate the Source 1 tab because the Source 1 tab content displays by default when the nested tabs are initialized for the first time.Why does it need to be activated if it is displayed by default when the tabs are initialised?
@Julian:
Your demo won't come up for me?
When I say "activate" I should have said make the button appear in the on state or "Blue" as it looks like when it is clicked.
I simply want the Facility tab and the Source 1 tab to look as if they have been clicked.
Then if any other Source tab is clicked, I want the Facility tab to remain in the on state and look like it has been clicked.
Your demo won't come up for me?
When I say "activate" I should have said make the button appear in the on state or "Blue" as it looks like when it is clicked.
I simply want the Facility tab and the Source 1 tab to look as if they have been clicked.
Then if any other Source tab is clicked, I want the Facility tab to remain in the on state and look like it has been clicked.
@All:
This seems to be doing the trick but, the function doesn't fire the first time a nested tab is clicked. The function only fires the second time you click on a nested tab.
Fiddle
This seems to be doing the trick but, the function doesn't fire the first time a nested tab is clicked. The function only fires the second time you click on a nested tab.
Fiddle
Active today
What happens when you try the sample URL ? I have tested again and it seems to be fine.
Featured Post
![[Webinar] Lessons on Recovering from Petya](https://filedb.experts-exchange.com/files/public/2017/7/11/dcb3272a-62a8-4274-a34e-d1771610ec3b.png)
Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Here, we have shared an easy step by step tutorial on how to download instagram images and videos on PC, Android Mobile and iOS mobile.
Today’s effective marketing is about coming down to the customers’ level and engaging in a whole new way. A text message is one of the most effective and influential ways that you can engage your customers. Here are eight ways that you can utilize t…
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month11 days, 23 hours left to enroll
636 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.