Siblings Scroll

How to make siblings aware of each other and still slide.

by Augustus Yuan

HTML

<div>Parent Block</div>
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>
<div>Block 4</div>
<div>Block 5</div>
<div>Block 6</div>
<div>Block 7</div>
<div>Block 8</div>

CSS

div:first {
    z-index: 2; 
}

div:not(:first) {
    z-index: 0; 
}

div {
    text-align: center;
    color: white;
    border: 1px solid black;
    border-bottom: 0.5px;
    background-color: green;
    width: 300px;
    height: 75px;
    line-height: 75px;
    position: relative;
}

JavaScript

//http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously

var expanded = true;
$('div:first').click(function() {
   //var num = $('div').length;
   //var height = parseInt($('div').css("height")); //height of block
   //var border = 1; //border between blocks size
   //var total = height*num + border*num; //total we have to translate
   if (expanded) {
      $('div:not(:first)').slideUp({ duration: 200, queue: false});
      //$('div:not(:first)').animate({ bottom: total + 'px'},{duration: 200, queue: false});      
      expanded = false;
   } else {
      $('div:not(:first)').slideDown({ duration: 200, queue: false});
      //$('div:not(:first)').animate({ top: 0}, 800, function() {});
      expanded = true;
   }
});

//how to do this with Javascript? you would need to either delay the first command executed to have the effect two events were happening at the same time or multithread

//multithreading for Javascript: https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers