Question

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!

HTML:

<div>
    <label>Select:</label>
    <select class="toggle_div" />
        <option value="">Select</option>
        <option value="a">A</option>
        <option value="b">B</option>
    </select>
</div>

<div id="group_a"> 
   Text A
</div>

<div id="group_b">
   Text B
</div>

jQuery:

$(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();
        }       

    })  

});

Answer 1

How about this:

$('#group_a').toggle($(this).val() == 'a');
$('#group_b').toggle($(this).val() == 'b');