ansaurus

Question

Answer 1

+1 A:

$(document).ready(function() {
    $('#selectdrop').change(function() {
        $('.panels div').hide();
        var panel = $(this).val();
        $('#' + panel).show();
    });
});

Untested, but I think that'll work ... it's very rough, but a jumping off point, and can most definitely be done better.

Nathan Loding 2010-06-10 18:17:58

Answer 2

+2 A:

I took your code above and made a jsfiddle with (I believe) the functionality you were looking for.

Nate Pinchot 2010-06-10 18:19:51

i think this update to your code is more complete.. http://jsfiddle.net/fbcS9/3/

Gaby 2010-06-10 18:24:13

It was close but not the effect I'm looking for. I need one of the options to be opened and the others to be closed until they are clicked,

Ozzy 2010-06-10 18:26:59

Yea, I realized I missed the hide after I first saved it. Thanks for fixing :) Updated to your link in the answer.

Nate Pinchot 2010-06-10 18:27:32

@Gaby thank you so much I'd in debt to you all my life it works beautifully.

Ozzy 2010-06-10 18:31:46

@Nate Pinchot, thanks to you too man, you guys saved my life

Ozzy 2010-06-10 18:34:42

wow, saved his LIFE! awsome!

Mark Schultheiss 2010-06-10 18:46:56

Now if I could only save the princess...

Nate Pinchot 2010-06-10 19:05:16

lol ... feels good... never saved someones life before :)

Gaby 2010-06-10 23:00:06

Answer 3

A:

Or better

<head>
<script>
$(document).ready(function() {
    $('.panels div').hide();// << IMPORTANT
    $('#selectdrop').change(function() {
        $('.panels div').slideUp();
        var panel = $(this).val();
        $('#' + panel).slideDown();
    });
});
</script>
</head>
<body>
.. The page ..
</body>

Neb 2010-06-10 18:23:03

The problem with this one is that I need to have one of the divs selected. But works perfect.

Ozzy 2010-06-10 18:36:25

@OzzyThen good, didn't work for me :P

Neb 2010-06-10 18:41:17

Answer 4

A:

DEMO: http://jsbin.com/amoto4

CSS: .panels div { display:none }

JQUERY:

$(function() {
    $('.panels div:eq(0)').show();
    $('#selectdrop').change(function() {      
      $('#' + this.value ).show().siblings().hide();
    });
});

aSeptik 2010-06-10 18:42:22

ansaurus

tags:

views:

answers:

jQuery hide/show with select tag

related questions