how to hide all the divs under a div class and show a div of the same class in JQuery?

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

You can use this:

$("div.subproperties div").hide();

to hide all divs. Then use the selected div's id to show it:

$("#divid").show();

Answer 2

When you show one, you want to hide the others, so something like:

 case '1':                                
      $("#borders").show();    
      $("#backgrounds").hide();
      $("#typography").hide();
      break;

Or you may wish to hide them all before the switch and then show the one specified.

Answer 3

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

Answer 4

To adjust in each case:

$('#subproperties').children(':not(#idofelementtoshow)').hide();

$('#subproperties').children('#idofelementtoshow').show();

Edit: Maybe more elegant (id is id of element to show):

$('#id').show().siblings().hide();

Answer 5

If you really want to do it by hand, you can try the other answers.

Or you can take a look at jQuery UI which offers a pretty good Accordion, which looks like what you want after all.