Q:

jQuery Dropdown Height Attr

I'm confused about why my dropdown only works perfectly fine half the time; http://spicyyeti.com/story_archive.html 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?
    <script>
$(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");
            }
        });
    });
</script>

And the CSS for the dropdown... 
<style> 
            .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%;
        }
</style>

A:

Well firstly, the way this is set up is a tad unconventional.  I'm not exactly sure what caused the code to do this, but I fixed it (slightly) below:
Original Way
(Disclaimer - this isn't the best way of doing things - but I included just for the sake of letting you know what happened with your code.  For a better and much simpler way, skip to "An Easier Way" below!)
<script>
$(document).ready(function() {
        $('.dropdown').css('display','none')
            
        $('.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.data('height') }, 400, "swing");
            }
        });
    });
</script>

Let's take a look at what I've changed -
The first line is changed, so instead of changing the height of .dropdown, it is simply hidden.  $dropdown.show() reveals it later.
I've also replaced the .attr('data-*') with more legible .data jquery functions.  They do the same thing, but now you just write height as opposed to data-height.
It's important to remember that what you are showing will not be the same height as .dropdown.  Therefore, some example HTML might look like this -
<div class="dropdown" data-height="240" style="height: 98px;">
            <h1><a href="http://spicyyeti.com/maniacs1.html">FIRST</a>•<a href="http://spicyyeti.com/m/maniacs15.html">LAST</a></h1>
        </div>

While this works, this is a pretty simple example, and it's a lot easier to deal with without data attributes!
BONUS EDIT:  I overlooked this, oops!...
Well - simply removing the height: 98px attribute on your div seems to fix the problem partially as well. But don't be dissuaded - there is a better answer below, that you'll find much more maintainable. I'm not sure why your code is reading the actual height instead of the data-height as you specified.  It is possible that they are read as the same thing.

An easier way
I have a JSFiddle here that I will be explaining.
HTML
The HTML here is fairly standard and similar to your setup.  There are two of the same classes at work - .item - which triggers the open of .dropdown.  This is a simple example, but can be easily applied to the page you have already.
<div class="item">
    Click me!
</div>
<div class="dropdown">
    content!<br>
    content!<br>
    content!<br>
    content!<br>
</div>
<div class="item">
    Click me!
</div>
<div class="dropdown">
    content!<br>
    content!<br>

</div>
<div class="item">
    Click me!
</div>
<div class="dropdown">
    content!<br>
    content!<br>
    content!<br>
</div>

CSS
There is only one important CSS rule here - It will hide your dropdown area, as opposed to setting it's height, and then having to recall it later with a data attribute.
.dropdown{
     display: none;
}

Javascript (commented!)
$(function(){ 
    $('.item').click(function(){
        $('.toggled').slideUp();
        //will take anything with the class "toggled" and slide it up!  Take out this line if you want multiple areas to be able to be expanded at once
        $(this).next('.dropdown').slideToggle().addClass('toggled');
        //this will take the ".item" and find the next div with the class of "dropdown" and slideToggle it.  It also adds the class "toggled" to be used with the previous line.
    });
});

This should be fairly straightforward to merge with your site.  Just add the Javascript in place of the one you have, add the CSS rule, and take out the style="98px;" attribute on the .dropdown class, as that rule gives it an incorrect height.
Let me know if you need any more help or clarification!

A:

according to @Alexander Lozada's  answer, try this 
<script>
    $(window).load(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");
            }
        });
    });
</script>

Difference between document.ready and window.load is 

document.ready fires up when DOM is loaded, not necessarily img is ready.
window.load fires up when all frames, objects and images are fully loaded.

In your case, your js should wait for image loaded for its height.
Try progressive img to make your page loads faster. 

