Home/ Questions/Q 7030887
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T00:43:50+00:00

I need to show/hide some divs depending on selected options. I’m using .change function.

  • 0

I need to show/hide some divs depending on selected options. I’m using .change function.

HTML looks more-less like this: 

<div id="1" style="display:none">
</div>
<div id="WRAP">
  <div id="2" style="display:none">
  </div>
  <div id="3" style="display:none">
  </div>
</div>
<div id="4" style="display:none">
</div>

jQuery:

$(function(){
$('#fyo').change(function(){ 
        $('#' + $(this).val()).show('slow').children().show('slow');
        $('#' + $(this).val()).siblings().hide('slow');
        $('#' + $(this).val()).parent().show('slow').siblings().hide('slow');

    }); 
});

I won’t write the code for options but just FYI the options are as follows:

Choose option: 1  or  2  or  3  or 4  or WRAP (so 2 & 3).

It should be possible to:

  1. show each of these divs separately, including inner divs – with all other divs hidden;
  2. <div id="WRAP"> should show all inner divs simultaneously.

The result I achieved is (almost) exactly what I needed but as I’m a beginner with jQuery, I was wondering if this is correct? Or is there any easier way to achieve this? There is one thing that makes me doubt that something is actually wrong – when I choose 2 or 3, it doesn’t display in the style of 'slow', but instead it’s almost immediate and looks like something is wrong because it doesn’t come out so smoothly.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
     $('#' + $(this).val()).parent().show('slow').siblings().hide('slow');

    this will potentially mess with element you didnt mean to change. For instance if 

    <body>
    <div class="AnimatedDivs">
        <div id="1" style="display:none">
        </div>
        <div id="WRAP">
          <div id="2" style="display:none">
          </div>
          <div id="3" style="display:none">
          </div>
        </div>
        <div id="4" style="display:none">
        </div>
    </div>
    <div class="Content">
    </div>
</body>

    and you select 1 then

    $('#' + $(this).val()).parent() //Basically selects div with class "AnimatedDivs"
                      .show('slow') //Does show animation on it
                      .siblings() // select all siblings (this would include div with class "Content")
                      .hide('slow'); //Now hide it ( so now div.Content is hidden )

    its best to give them all a similar class like “hideableDiv” and do manipulations using that as a selector;

    <div id="1" class="hideableDiv" style="display:none">
</div>
<div id="WRAP" class="hideableDiv">
  <div id="2" class="hideableDiv" style="display:none">
  </div>
  <div id="3" class="hideableDiv" style="display:none">
  </div>
</div>
<div id="4" class="hideableDiv" style="display:none">
</div>

$('#fyo').change(function(){ 

    var divToShow = $('#'+$(this).val());

    //Hide them all except the one being shown, .not function removes the passed object from its selection
    $(".hideableDiv").not(divToShow).hide('slow');

    //Now show the one that was selected
    divToShow.show('slow');
    //Select parent (if it has class hideableDiv ) and show it
    divToShow.parent(".hideableDiv").show('slow');

    //If WRAP selected also show the children as well
    if( $(this).val() == "WRAP" )
        divToShow.children().show('slow');

});
    • 0