Question

I’m using the jQuery Show/Hide plugin to show content in 3 tabs (map-americas, map-europe and map-aspac).

I have a select menu that lists countries, but when one of those are selected, I would like the appropriate ‘tab’ to become visible.

My code is as follows;

<div id="map-global">
    <div id="selection">
        <select name="jumpMenu" id="jumpMenu">
            <option value="#map-americas">Americas - Cuauhtémoc</option>
            <option value="#map-americas">Americas - New York</option>
            <option value="#map-americas">Americas - Santa Clara</option>
            <option value="#map-europe">Europe - Accrington</option>
            <option value="#map-europe">Europe - Barcelona</option>
            <option value="#map-europe">Europe - Bergamo</option>
            <option value="#map-aspac">Asia Pacific - Lane Cove</option>
            <option value="#map-aspac">Asia Pacific - Mumbai</option>
            <option value="#map-aspac">Asia Pacific - Singapore</option>
        </select>
    </div>
</div>
<div id="map-americas">
    Some content
</div>
<div id="map-europe">
    Some content
</div>
<div id="map-aspac">
    Some content
</div>
<ul class="nav">
    <li><a class="loc-global" href="#map-global"></a></li>
    <li><a class="loc-america" href="#map-americas"></a></li>
    <li><a class="loc-europe" href="#map-europe"></a></li>
    <li><a class="loc-apac" href="#map-aspac"></a></li>
</ul>

As you can see, the ‘selection’ div holds the select menu and depending on which item you select, the appropriate ‘map-X’ div should show.

Note: I have edited the code above to indicate that when a user first comes to the page, the select is in the “map-global” div.

So when a user selects an option, the “map-global” should then hide and the “map-americas”, “map-europe” or “map-aspac” div should show. Also the corresponding link in the “nav” unordered list should have a “current” class applied.

Answer 1

If you don’t want to change your HTML you could do:

$(function() {
    var $maps = $('#map-americas').add('#map-europe').add('#map-aspac');
    $maps.hide();    
    $maps.add('#map-global');
    $navItems = $('ul.nav a');

    $("#jumpMenu").change(function() {
        $maps.hide();
        var mapName = $(this).val();
        $(mapName).show();
        $navItems.removeClass('current');
        $navItems.filter('[href=' + mapName + ']').addClass('current');
    });
});​