title: jQuery Dropdown Height Attr
body: <p>I'm confused about why my dropdown only works perfectly fine half the time; <a href="http://spicyyeti.com/story_archive.html" rel="nofollow">http://spicyyeti.com/story_archive.html</a> I believe if you open the preview, chances are the dropdown won't open to its full height. Although, sometimes the dropdown works fine, and when I test it offline, it works fine as well. What's the problem here?</p>
  
  <pre><code>    &lt;script&gt;
  $(document).ready(function() {
          $('.item + .dropdown').each(function () {
              $(this).attr('data-height', $(this).height()).height(0);
          });
  
          $('.item').click( function() {
              $dropdown = $(this).find('+ .dropdown');
              if ($(this).hasClass('open')) {
                  $(this).removeClass('open');
                  $dropdown.animate({ height:'0' }, 400, "swing", function () {
                      $(this).hide();
                  });
              } else {
                  $(this).addClass('open');
                  $dropdown.show().animate({ height: $dropdown.attr('data-height') }, 400, "swing");
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And the CSS for the dropdown... </p>
  
  <pre><code>&lt;style&gt; 
              .dropdown {
          display: block;
          width: calc(80% - 100px);
          background-color: white;
          padding: 5px 5px 5px 5px;
          margin: -10px auto;
          text-align: center;
          overflow: hidden;
          }
          .dropdown h2 {
          display: inline;
          font-size: 29px;
          vertical-align: 60px;
          padding: 0 10px;
          }
          .dropdown h1 {
          font-size: 30px;
          font-family: "Lobster Two", cursive;
          }
          .dropdown img {
          max-height: 150px;
          max-width: 150px;
          border-radius: 100%;
          }
  &lt;/style&gt;
  </code></pre>