Solved

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

Posted on 2016-09-28
8
28 Views
Last Modified: 2016-10-08
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

0
Comment
Question by:evibesmusic
  • 4
  • 4
8 Comments
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41821191
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?
0
 

Author Comment

by:evibesmusic
ID: 41822407
@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.
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41822649
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?
0
 

Author Comment

by:evibesmusic
ID: 41822671
@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.
0
New! My Passport Wireless Pro Wi-Fi Mobile Storage

Portable wireless storage to offload, edit, and stream anywhere.

High-capacity, wireless mobile storage designed to accompany professional photographers and videographers in the field to easily offload, edit and stream captured photos and high-definition videos.

 

Accepted Solution

by:
evibesmusic earned 0 total points
ID: 41822716
@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
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41822743
What happens when you try the sample URL ? I have tested again and it seems to be fine.
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41822745
I am using the jQueryMobile framework.
Just saw this - will have to rework sample ...
0
 

Author Closing Comment

by:evibesmusic
ID: 41834909
The fiddle provided adequately answers the question.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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)
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

948 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now