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


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 -->  


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


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):



You can use this:

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

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



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.


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.


get selected text from option and use these two lines:


$("div.subproperties").hide();//HIDE ALL DIVS


<script type="text/javascript">  $(document).ready(function(){      $("#propertiesMenu").change(function(){          var txt=$("#propertiesMenu option:selected").text();          $("div. subproperties").hide();          $("div#"+txt).parents("div. subproperties").show();      });  });  </script>  


This is quite an older post but I am putting information here just to help other if someone will see to it.

To show the div while selecting one value and hide while selecting another value: -

$('#dropdownid').bind('change', function(event) {

       var i= $('#dropdownid').val();            if(i=="sometext")           {               $('#divid').show();           }         elseif(i=="othertext")           {             $('#divid').hide(); // hide the first one             $('#divid2').show(); // show the other one              }  


Hope this will help you

Kind Regards, Summved

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »