Question

I have a div class named “subproperties”. In that div, I have many div elements like border,background,logo,button. These div elements are hidden initially(using style=”display:none;”)

I also have a drop down box with these div element names as options. When I click an option say ‘logo’, that div is showed. Next when I click the option ‘border’, the ‘logo’ div should be hidden and the ‘border’ div should be shown. Similarly for all cases.

That is, I want all the divs of the class subproperties to be hidden and show only one. how to do that in jquery?

Here is my code.

 $("#properties option").click(function(){
        selectedOption=$(this).attr("value");

        switch(selectedOption){
            case '1':
                $("#borders").show();
                break;

            case '2':
                $("#backgrounds").show();
                break;

            case '3':
                $("#typography").show();
                break;
        }
    });

 <div class="float_left spaceleft" id="properties">
<p class="title1">Properties</p>
    <div class="seperator"></div>
        <select id="propertiesMenu" class="select" size="7">
                <option value="1">Borders</option>
                <option value="2">Backgrounds</option>
                <option value="3">Typography</option>

        </select>
</div><!--End of properties -->

 <div class="subproperties">

     <div class="float_left spaceleft" id="backgrounds" style="display:none;">
        <p class="title1">Backgrounds</p>
        <select id="backgroundsMenu" class="select" size="7">
            <option value="bgHtml">Wallpaper</option>
            <option value="bgForm">Form</option>
            <option value="bgInstruct">Instructions</option>
        </select>
      </div><!--End of backgrounds -->

      <div class="float_left spaceleft" id="typography" style="display:none;">
        <p class="title1">Typography</p>
        <div class="seperator"></div>
        <select id="typographyMenu" class="select" size="7">
            <option value="ftFormTitle">Title</option>
            <option value="ftFormDescription">Description</option>
            <option value="ftFieldTitle">Field Title</option>
            <option value="ftFieldText">Field Text</option>
        </select>
        </div><!--End of typography -->

     <div float_left spaceleft" id="borders" style="display:none;">
        <p class="title1">Borders</p>
        <select id="bordersMenu" class="select" size="7">
            <option value="brForm">Form</option>
            <option value="brDivider">Sections</option>
        </select>
        </div><!--End of borders -->

</div><!-- End of sub properties -->

Answer 1

$('#properties option').click(function() { 
    $('.subproperties div').hide();
    //... switch statement ...