CODEWITHSUNDEEP
jquery
JaneVi
JaneVi

Reputation: 199

Nested divs - .change function and show/hide siblings, children and parents

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.

Upvotes: 0

Views: 1845

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42746

 $('#' + $(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');

});

Upvotes: 1

Related Questions