Question

I have the code that’s below. Each of the div tags is set by the CSS to display: none; , nothing else. I want the select box to show only the selected div and its contents, but hide the rest of them. I feel like I’m just missing something simple, but I can’t figure it out. I’m using jQuery 1.8.1. Thanks in advance!

As a note, I edited this link’s code for my purposes. I’m not phenomenal with javascript, which is why this is likely terrible.

<script type="text/javascript">
$(document).ready(function(){
$("#choices").change(function(){

if ($(this).val() == "option1" ) {

    $("#option1").slideDown("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option2" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideDown("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option3" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideDown("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option4" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideDown("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option5" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideDown("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option6" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideDown("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option7" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideDown("fast");

} 

});
</script>
random body text
<form>
<select id="choices">
    <option value="none">Select one...</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6">Option 6</option>
    <option value="option7">Option 7</option>
</select>
</form>
    <div id="option1" class="hide">Opt 1 Text</div>
    <div id="option2" class="hide">Opt 2 Text</div>
    <div id="option3" class="hide">Opt 3 Text</div>
    <div id="option4" class="hide">Opt 4 Text</div>
    <div id="option5" class="hide">Opt 5 Text</div>
    <div id="option6" class="hide">Opt 6 Text</div>
    <div id="option7" class="hide">Opt 7 Text</div>

Answer 1

You are using class selector for selecting element by ID, you should use # instead of ., jQuery selectors work like CSS selectors. You can also minify your code.

$("#choices").change(function(){ 
   $('.hide').slideUp();
   $('#'+this.value).slideDown()
});

http://jsfiddle.net/X7AbR/