Question

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.

Answer 1

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