title: Click and stay in same position when some element above hide
body: <p><img src="https://i.stack.imgur.com/1xJQ1.png" alt="enter image description here"></p>
  
  <p><strong>Demo :</strong> <a href="http://jsfiddle.net/My29d/" rel="nofollow noreferrer">http://jsfiddle.net/My29d/</a></p>
  
  <p>I have content like this #1, #2, #3, #4 and more...</p>
  
  <p>When I click <code>readmore</code> #2 and click <code>readmore</code> #1, it's ok because hidden content expand below and window stay in same position.</p>
  
  <p>But when I click <code>readmore</code> #1 and scoll to content #2 so click on <code>readmore</code> #2</p>
  
  <p>expanded content #1 will hide and content #2 will show full content.</p>
  
  <p>So window position doesn't stay in same position right ?</p>
  
  <p>I have no idea how to do.</p>
  
  <p><em>Maybe use scroll to current expanded element ?</em></p>
  
  <pre><code>more_btn.on('click', function () {
      more_btn.show();
      more_content.hide();
      $(this).hide().next('div').show().css('display', 'inline');
  });
  </code></pre>
  
  <p>PS : If this question is bad unstanding, I'm sorry and tell me to expand.</p>