CODEWITHSUNDEEP
jquery
qnoid
qnoid

Reputation: 2376

Slide toggle doesn't apply when element is initially hidden?

Consider the following html snippet

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js" ></script>
  <script type="text/javascript" src="scripts/foo.js"></script>
</head>

<body>

<div class="apdu layer">
  <div class="apdu layer entry">APDU</div>

    <div class="hci layer">
    <div class="hci layer entry">HCI</div>

        <div class="raw layer">
          <div class="raw layer entry">RAW</div>            
          <div class="raw layer entry">RAW</div>            
          <div class="raw layer entry">RAW</div>            
    </div>

    </div>

  <div class="hci layer">
    <div class="hci layer entry">HCI</div>

    <div class="raw layer">
      <div class="raw layer entry">RAW</div>        
      <div class="raw layer entry">RAW</div>        
    </div>

  </div>

    <div class="hci layer">
    <div class="hci layer entry">HCI</div>
    <div class="raw layer">
      <div class="raw layer entry">RAW</div>        
      <div class="raw layer entry">RAW</div>        
      <div class="raw layer entry">RAW</div>        
      <div class="raw layer entry">RAW</div>        
    </div>
  </div>

</div>

with the following javascript

$(function()
{   
$('.apdu.layer.entry').click( function() {
    $(this).parent().children('.hci.layer').slideToggle();
});

$('.hci.layer.entry').click( function() {
    $(this).parent().children('.raw.layer').slideToggle();
});

});

works all great and expected.

However, when I add the following two lines to initially hide the two div(s) 

$('.hci.layer').hide();
$('.raw.layer').hide();

there is a 'rough animation' that looks like the sliding takes place, but the contents remain hidden.

From the doc of slideToggle()

If the element is initially displayed, it will be hidden; if hidden, it will be shown.

Upvotes: 0

Views: 2196

Answers (2)

Nick Craver
Nick Craver

Reputation: 630469

You're hiding the children and their children (and so on, it matches any div with those classes), if you want to re-show them, you need to use .find() instead of .children() (which would only toggle the immediate children), like this:

$(function() {   
    $('.hci.layer, .raw.layer').hide();
    $('.apdu.layer.entry').click( function() {
        $(this).parent().find('.hci.layer').slideToggle();
    });        
    $('.hci.layer.entry').click( function() {
        $(this).parent().find('.raw.layer').slideToggle();
    });
});

You can view a demo here

However, a smoother approach would be to just not hide the .entry divs, using the :not() selector, like this:

$('.hci.layer:not(.entry), .raw.layer:not(.entry)').hide();

Then use .siblings() instead of .parent().children(), like this:

$(function() {   
    $('.hci.layer:not(.entry), .raw.layer:not(.entry)').hide();
    $('.apdu.layer.entry').click( function() {
        $(this).siblings('.hci.layer').slideToggle();
    });        
    $('.hci.layer.entry').click( function() {
        $(this).siblings('.raw.layer').slideToggle();
    });
});
​

You can view a demo here, you can see the animation is much smoother now that you're only hiding/showing what you need at each level.

Upvotes: 1

Ju Nogueira
Ju Nogueira

Reputation: 8461

I believe this is not the best solution, but if you call

$('.hci.layer.entry').click();
$('.apdu.layer.entry').click();

instead of 

$('.hci.layer').hide();
$('.raw.layer').hide();

to initially hide the divs, it works.

Upvotes: 0

Related Questions