jquery DOM Traversal

HTML

<div class="parent">
  <p>.parent</p>
  <div class="child">
    <p>.child</p>
  </div>
  <div class="twins">
    <p>.twins</p>
  </div>
  <div class="twins">
    <p>.twins</p>
  </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.parent {
  width: 90%;
  border: 5px solid #E18728;
  float: left;
}

.child {
  width: 90%;
  padding: 20%;
  border: 4px solid black;
  margin: .5em auto;
}

.twins {
  width: 50%;
  padding: 1em;
  border: 4px solid black;
  float: left;
}


/* styling for Pen, not related to box-sizing or layout */

body {
  font-family: sans-serif;
  font-size: 1.1em;
}

p:not(.intro) {
  text-align: center;
}

.highlight {
    background-color: yellow;
}

JavaScript

// Add a "reverse" method to jQuery:
jQuery.fn.reverse = [].reverse;

// jQuery Looping
// We want to hide each element, one at a time, starting
// with the last .twins element and moving up to the .parent
// element. Use the .hide(500) to gradually hide the elements.
// BONUS: Use a timer to hide one element every 1/2 second, 
// taking 2 total seconds to hide the 4 divs.

// Selector gets the elements in the order we're interested in
var toHide = $('div').reverse();

// Implement your code here
//toHide.each(function(idx,el){
//    $(el).delay(500*idx).hide(1000*idx)
//}
            
            toHide.each(function(indx,ele){
    $(ele).delay(1000*indx).hide(1500);
});