Home/ Questions/Q 862397
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T09:08:06+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0