How to show/hide divs based on selection using jQuery?
<p>Using jQuery, I'd like to display a different set of text based on a user's selection.  As I'm new to jQuery, I wanted to see if there is a cleaner way to write this out?  My current code is functioning fine, but would love any input on other functions that could accomplish this more quickly before I move further.  Thanks!</p>

<p>HTML:</p>

<pre><code>&lt;div&gt;
    &lt;label&gt;Select:&lt;/label&gt;
    &lt;select class="toggle_div" /&gt;
        &lt;option value=""&gt;Select&lt;/option&gt;
        &lt;option value="a"&gt;A&lt;/option&gt;
        &lt;option value="b"&gt;B&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;

&lt;div id="group_a"&gt; 
   Text A
&lt;/div&gt;

&lt;div id="group_b"&gt;
   Text B
&lt;/div&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>$(document).ready(function() {

    $('#group_a').hide();
    $('#group_b').hide();

    $('.toggle_div').on('change',function(){

        if($(this).val() == "a"){
            $('#group_a').show();
            $('#group_b').hide();
        }

        if($(this).val() == "b"){
            $('#group_a').hide;
            $('#group_b').show();
        }

        if($(this).val() == ""){
            $('#group_a').hide();
            $('#group_b').hide();
        }       

    })  

});
</code></pre>
