CODEWITHSUNDEEP
javascriptjquery
Michael
Michael

Reputation: 2284

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

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

    })  

});

Upvotes: 1

Views: 1247

Answers (9)

JesseBuesking
JesseBuesking

Reputation: 6586

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.

Upvotes: 0

Itay Kinnrot
Itay Kinnrot

Reputation: 721

you can change the value to the div id - hold all the div's in one container and on each change go over them with a loop(each) and check if the val == id show else hide.

Upvotes: 0

StuperUser
StuperUser

Reputation: 10850

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

Upvotes: 0

ipr101
ipr101

Reputation: 24236

Try - 

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

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

Upvotes: 0

Alnitak
Alnitak

Reputation: 339816

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

Upvotes: 0

Oliver
Oliver

Reputation: 11597

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.

Upvotes: 0

solendil
solendil

Reputation: 8458

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

Upvotes: 0

Jerad Rose
Jerad Rose

Reputation: 15513

How about this:

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

Upvotes: 3

dnuttle
dnuttle

Reputation: 3830

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.

Upvotes: 0

Related Questions