Avatar of evibesmusic
evibesmusic
Flag for United States of America asked on

How to keep parent tab selected when nested tab is clicked?

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.

<!-- 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 -->

Open in new window

jQueryMobileJavaScript

Avatar of undefined
Last Comment
evibesmusic

8/22/2022 - Mon
Julian Hansen

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?
evibesmusic

ASKER
@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.
Julian Hansen

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
- 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?
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
evibesmusic

ASKER
@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.
ASKER CERTIFIED SOLUTION
evibesmusic

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Julian Hansen

What happens when you try the sample URL ? I have tested again and it seems to be fine.
Julian Hansen

I am using the jQueryMobile framework.
Just saw this - will have to rework sample ...
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
evibesmusic

ASKER
The fiddle provided adequately answers the question.