title: jQuery/CSS: trying to change margin-top of a sibling <div> in an click event
body: <p>I have an HTML structure as follows </p>
  
  <pre><code>&lt;div class="parent"&gt;
    &lt;div id="child1"&gt;
      &lt;p class="invisible"&gt;
           Lorem ipsum aequitatem etc.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="child2"&gt;
        Child 2
    &lt;/div&gt;
    &lt;div id="child3"&gt;
        Child 3
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I  currently have an event listener in jQuery which is listening for a click event on the first child. I then toggle the visibility of the <code>&lt;p&gt;</code> element by <code>toggleClass('.invisible')</code> which removes the <code>display:none</code> applied. </p>
  
  <p>I am trying to simultaneously change the default behavior of the <code>&lt;p&gt;</code> content kicking the sibling divs to the bottom of the parent div container by changing the <code>margin-top</code> of the other two siblings. However, when I apply a class that has a negative <code>margin-top</code>, it does not actually change the siblings top margin. </p>
  
  <p>Here are both of my current approaches and their shortcomings: </p>
  
  <pre><code>$('#child1').on('click', function(){
     $('#child1 p').toggleClass('invisible');
  
     //does not change margin-top as presumably it does not change
     //the margin-top value associated with the id
     $('#child2').toggleClass('new_margin_top');
  
     //changes magin-top but is awkward for obvious reasons after n &gt;=2 iterations of the click event
     $('#child2').css('margin-top',' &lt;arbitrary-number&gt; px');
  });
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/ebbnormal/qmnsc1ga/1/" rel="nofollow">JSFiddle</a> that has the same behavior, so you can see what is happening: </p>