title: Show / Hide elements - move to top of screen?
body: <p>I'm using jquery to toggle the hiding and showing of some divs. </p>
  
  <p>This works fine until one of the divs expands off screen. What I'd like to do is scrollup so the div is at the top of the screen.</p>
  
  <p>This is the code I'm using :</p>
  
  <pre><code>$('.slider').hide(800);
  $('a#show').on('click', function (e) {
      e.preventDefault();
      var elem = $(this).next('.slider')
      $('.slider').not(elem).hide();
      elem.toggle();
  });
  </code></pre>
  
  <p>I've also created a <strong><a href="http://jsfiddle.net/bMJ79/5/" rel="nofollow">FIDDLE</a></strong> showing the issue. Clicking on section 2 expands past the bottom of the screen.</p>
  
  <p>Ideally I want this to scrollup so section2 is at the top of the screen.</p>
  
  <p>I've added this to after <code>elem.toggle();</code> and it does sort of work.</p>
  
  <pre><code>$('html, body').animate({
    scrollTop: elem.offset().top
  }, 1000);
  </code></pre>
  
  <p>Updated <strong><a href="http://jsfiddle.net/bMJ79/6/" rel="nofollow">FIDDLE</a></strong></p>
  
  <p>The issue I have with this is the scrollup frequently scrolls partway into the div and not just to the top.</p>
  
  <p>Can anyone advise how I get this to only scroll to the top of the current div and not to partway into it.</p>
  
  <p><strong>** UPDATE **</strong>
  Updated <strong><a href="http://jsfiddle.net/bMJ79/11/" rel="nofollow">FIDDLE</a></strong> showing the partial scrolling issue.</p>
  
  <p>Click on Section 1, it will open, scroll down to section 2 and click on it.</p>
  
  <p>it will open part way into the DIV.</p>
  
  <p>How do I sort that ?</p>
  
  <p>** <strong>FOLLOWUP</strong> **</p>
  
  <p>This only seems to be an issue if I have timings in the code :</p>
  
  <pre><code>   $('.slider').not(elem).hide(600);
          elem.toggle(600);
  </code></pre>
  
  <p>The above has the issue. yet the following works:</p>
  
  <pre><code>   $('.slider').not(elem).hide();
          elem.toggle();
  </code></pre>
  
  <p>but lacks the nice transition. Any way to get both working ?</p>
  
  <p>Thanks</p>