Question

Is it possible to link jQuery menu to tabs?

For example if the user selects “By Filter” in the menu below I want it to open up the Search By Filters tab. How can I achieve this?

JS

$("#menu").menu();
$("#search").tabs();

HTML

<ul id="menu" style="border: 0px; background:none">
<li><a id="2" style="cursor: pointer">Search</a>
<ul style="z-index: 2">
<li><a id="2a" style="cursor: pointer">By Filter</a></li>
<li><a id="2b" style="cursor: pointer">By Room</a>    
</li>
</ul>
</li>
</ul>

<div id="search" style="z-index: 1;">
  <ul>
    <li><a href="#search-1">Search By Filters</a></li>
    <li><a href="#search-2">Search By Room</a></li>
  </ul>
  <div id="search-1">
  </div>
  <div id="search-2">
  </div>
</div>  

Answer 1

Yes, you can do this:
Add Id for each search option

Make a listener to the Id 2 in the menu and on click, call

$('#tabid').click(); 

Here is the complete code:

The script:

$('#2a').click(function(){
    $('#sbf a').click(); 
}); 


$('#2b').click(function(){
    $('#sbr a').click(); 
}); 

The HTML code:

<ul id="menu" style="border: 0px; background:none; width:50%; ">

<li><a id="2" style="cursor: pointer">Search</a>
<ul style="z-index: 2">
<li><a id="2a" style="cursor: pointer">By Filter</a></li>
<li><a id="2b" style="cursor: pointer">By Room</a>    
</li>
</ul>
</li>
</ul>
<div id="search" style="z-index: 1;">
  <ul>
    <li id="sbf"><a href="#search-1">Search By Filters</a></li>
    <li id="sbr"><a href="#search-2">Search By Room</a></li>
  </ul>
  <div id="search-1">
  </div>
  <div id="search-2">
  </div>
</div>  

Check this fiddle

http://jsfiddle.net/ej67Q/