How to show/hide divs based on selection using jQuery?

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');

Answer 2

One tweak I would suggest is getting the value from the beginning:

$val = jQuery(this).val();

And then check the value of $val instead of $(this). So that your code doesn't have to keep resolving $(this).

You could also establish references to your other divs:

$groupA = jQuery('#group_a');
$groupB = jQuery('#group_b');

Because everytime you use $(selector), you create a new jQuery object that has to be resolved.

You could create $groupA and $groupB outside of your function, so they'd be defined only once for the life of the page.

Answer 3

Use class instead of ids whenever possible, they're more flexible. In your case, using multiple classes would lead to :

<div class="group_a hidable"> 
   Text A
</div>

<div class="group_b hidable">
   Text B
</div>

Then

$(document).ready(function() {
    $('.hidable').hide();
    $('.toggle_div').on('change',function(){
        $('.hidable').hide();
        $('.group_'+$(this).val()).show();
    })  
});

Answer 4

If I was in a terse mood, I might do something like:

$('.toggle_div').on('change',function(){
    $('#group_a').hide();
    $('#group_b').hide();

    if($(this).val() == "a")
        $('#group_a').show();

    if($(this).val() == "b")
        $('#group_b').show();   

})

But I don't think its a big deal.

Answer 5

If the elements to be shown or hidden are all at the same level of the DOM, you can use .siblings() to find all of the ones that aren't the one of interest.

Also, use a class to restrict all actions to the divs that are supposed to be toggled.

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

    var which = $(this).val();
    var cls = '.myclass';

    if (which) {
        var sel = '#group_' + which;
        $(sel).show().siblings(cls).hide();
    } else {
        $(cls).hide();
    }
});

Answer 6

Try -

$('.toggle_div').on('change', function() {
    $('div[id^="group"]').hide();
    $('#group_' + $(this).val()).show();
}).change();

Demo - http://jsfiddle.net/R5KSq/

Answer 7

$('.toggle_div').on('change',function(){
    $('#group_a,#group_a').hide();
    $('#group_' + $(this).val()).show();
})

You can use selectors to your advantage $('#group_' + $(this).val()) will be empty if $(this).val() is not a or b , then the selector will be empty and nothing will be shown.
If it is a , #group_a is selected and shown.
If it is b , #group_b is selected and shown.

I'd use the event argument and the target rather than this , it makes writing these handlers as anonymous functions easier if they are to be reused:

$('.toggle_div').on('change',function(event){
    $('#group_a,#group_a').hide();
    $('#group_' + $(event.target).val()).show();
})

Answer 8

您可以将值更改为div id - 将所有div保存在一个容器中，并在每次更改时使用循环（每个）检查它们并检查val == id是否显示else hide。

Answer 9

What I would do is wrap all group_CHAR elements in a main div, add css to hide all group_CHAR elements initially (much faster), and use this js:

var g = $('#groups');

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

    $('div', g).hide();

    var t = $(this).val();    
    if (t !== '') {    
        $('#group_' + t, g).show();           
    }
});

I've created http://jsfiddle.net/kDGNG/ so you can see it in action.