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


Solution:1

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


Solution:2

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();  


Solution:3

You can use this:

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

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

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


Solution:4

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.


Solution: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.


Solution:6

get selected text from option and use these two lines:

var txt=...//GET TEXT FROM SELECT LIST

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

$("div#"+txt).parents("div.subproperties").show();

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


Solution:7

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
Previous
Next Post »