jQuery stuck with select menu and tabs
<p>I wish to have a select with multiple options to switch between different divs. Other than that, the user should be able to switch between the selected content and an image that's relevant to the selected div. The select part seem to work with the code below, but I can't manage to get the tabs to do their work (switch between content and map).</p>

<pre><code>$(function() {
    $('#container div#tabs select').change(function(){
        var current = $(this).val();
            current = current.replace(/\s+/g, '-').toLowerCase();
            $('#container div#content').find('div').addClass('hide');
            $('#container div.map').removeClass('show').addClass('hide');
            $('#container div#content div#' + current).toggleClass('hide', 'show');
    });
        $('#container div#tabs div.chooseinfo span').bind('click', function() {
            $(this).parent().find('span').removeClass('active').addClass('inactive');
            $(this).removeClass('inactive').addClass('active');  

            var mapID = $('#container div#content div.placement:not(.hide)').attr('id');
            alert(mapID);
            if($(this).hasClass('map')) {
                $('#container div#content div#' + mapID).addClass('hide');
                $('#container div.' + mapID + '-map').removeClass('hide').addClass('show');
            }
            else {
                console.log($('#container div#content div#' + mapID).removeClass('hide').addClass('show'));
                $('#container div.' + mapID + '-map').addClass('hide');
            }
        });
});

&lt;div id="container"&gt;
    &lt;div id="tabs"&gt;
        &lt;div class="chooseinfo"&gt;
            &lt;span class="info active"&gt;Switch to content&lt;/span&gt;
            &lt;span class="map inactive"&gt;Switch to map&lt;/span&gt;
        &lt;/div&gt;
        &lt;select class="chzn-select chzn-done" style="width: 180px; display: none;" id="sel31G"&gt;
            &lt;option id="1" class="tab-1"&gt;Tab 1&lt;/option&gt;
          &lt;option id="2" class="tab-2"&gt;Tab 2&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
    &lt;div id="content"&gt;
        &lt;div id="tab-1" class=" placement"&gt;
        &lt;div id="right" class="show"&gt;
            &lt;h2 class="black"&gt;Some info&lt;/h2&gt;
          &lt;p&gt;Some more info&lt;/p&gt;
        &lt;/div&gt;
        &lt;h2&gt;Tab 1&lt;/h2&gt;
        &lt;p&gt;Yay some tab content for tab 1&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="tab-1-map map hide"&gt;
        &lt;img src="bar1.png" width="500" height="200" class="des shop-img" /&gt;
      &lt;/div&gt;
      &lt;div id="tab-2" class="hide placement"&gt;
        &lt;div id="right" class="show"&gt;
            &lt;h2 class="black"&gt;Heading&lt;/h2&gt;
          &lt;p&gt;Text&lt;/p&gt;
                    &lt;h2 class="black"&gt;Heading&lt;/h2&gt;
          &lt;p&gt;Text&lt;/p&gt;
        &lt;/div&gt;
        &lt;h2&gt;test&lt;/h2&gt;
        &lt;h2 class="black"&gt;Heading&lt;/fh2&gt;
        &lt;p&gt;Text&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="tab-2-map map hide"&gt;
        &lt;img src="bar2.png" width="500" height="200" class="des shop-img" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Updated with a <a href="http://jsfiddle.net/Emb9Q/" rel="nofollow">http://jsfiddle.net/Emb9Q/</a></p>

<p>Update: The first issue seems to be this line:</p>

<pre><code>var mapID = $('#container div#content div.placement:not(.hide)').attr('id');
</code></pre>

<p>Once I hide the div I won't be able to retrieve the current div id. I guess I have to change the select.</p>

<p>Update: I think I solved it. <a href="http://jsfiddle.net/Emb9Q/6/" rel="nofollow">http://jsfiddle.net/Emb9Q/6/</a></p>
