CODEWITHSUNDEEP
jqueryjquery-ui-tabs
runner78
runner78

Reputation: 3

Jquery UI Tabs - Selecting Tab Also Switches DIV content on another part of page

Using Jquery UI tabs, I am trying to different divs show/hide when a particular tab is selected. The divs will be on the sidebar while the tab action is located in the page's main content div.

Here is my code:

            <div id="tabs">
            <ul>
            <li><a href="#tabs-1">tab 1</a></li>
            <li><a href="#tabs-2">tab 2</a></li>
            </ul>

            <div id="tabs-1">
            Tab 1 Content
            </div>

            <div id="tabs-2">
            Tab 2 Content
            </div>

            </div>


            <div id="sidebar">

            <div id="tabs1show">This is "#sidebar tabs1show ... 1</div>
            <div id="tabs2show">This is "#sidebar tabs2show"... 2</div>
            </div>

When #tabs-1 is selected, I would like #tabs1show content to appear in the sidebar. When #tabs-2 is selected, #tabs1show div is hidden and #tabs2show content appears in the sidebar. I know I have to put some kind of combination of show/hide (perhaps) in the " $tabs = $('#tabs').tabs(); " to link the action, but I don't know the exact way to do so. I am relatively new to jquery so, please, any help would be greatly appreciated.

Thank you.

Upvotes: 0

Views: 1224

Answers (2)

Luffy
Luffy

Reputation: 2337

You can do it like this http://jsfiddle.net/gurkavcu/ZcHvV/.

Probably there have been a better way to detect which tab is selected.

Other alternatives :

ui.tab.panel.id == "tabs-1" && ui.tab.panel.id == "tabs-2"

ui.index == 0 && ui.index == 1

Upvotes: 0

Sinetheta
Sinetheta

Reputation: 9429

You can hook into the 'select' event, when someone picks a tab:

$('#tabs').tabs({
   select: function(event, ui) {
       $('.secret').hide().eq(ui.index).show(); 
   }
});

'secret' is the class I've added to your html, do whatever you'd like to target those sidebar panels.

jsFiddle

Upvotes: 1

Related Questions