toggle on div jumping back to top of page

Question

I've got a page with clickable divs that toggle content when clicked. When the div is clicked the second time (closing the content), the page jumps back up to the top.

I see this is an issue other people have had, but all of the solutions I have found are related to the anchor tag, which is not the problem here.

I have tried changing my code per the solution here and adding return false; and event.preventDefault(); but neither of those worked. What am I doing wrong?

jQuery:

    $(document).ready(function(){
        $('h1').animate({"right":"147px"},3000);
        $('.more').toggle(
                function(){
                    $(this).css({
                        'z-index':'100',
                        'background-position': '41px 0px'
                        });
                    $('#heroFullColor').hide();
                    $('#heroNoColor').show();
                    $('div.' + $(this).attr('id')).fadeIn('fast');
                    $('.more').not(this).hide();
                },
                function(){
                    $(this).css({
                        'background-position': '0px 0px'
                            });
                    $('div.' + $(this).attr('id')).fadeOut('fast');                 
                    $('#heroNoColor, .infoWindow').hide();
                    $('#heroFullColor').fadeIn('fast');                 
                    $('.more').not(this).show();
                });
    });

HTML structure (this repeats several times on the page):

    <div class="more" id="franceFlag"></div>
    <div class="infoWindow franceFlag">
        <img class="imageOn" src="images/lp_foundry_on-franceFlag.jpg" width="71" height="213" alt="French Flag" id="franceFlagOn" />
        <p class="franceFlag">blah blah blah</p>
    </div>      
    <div class="more" id="heliBoth"></div>
    <div class="infoWindow heliBoth">
        <img class="imageOn" src="images/lp_foundry_on-heliBoth.jpg" width="296" height="750" alt="Helicopters" id="heliBothOn" />
        <p class="heliBoth">blah blah blah</p>
    </div>      

Here is a fiddle - if you scroll to the bottom right, and click on the + sign next to the flag, you'll see what I mean.

Answer 1

It's because you are hiding the element that gave your container height, then showing a different one. So it briefly has no height.

If you explicitly give your container a height, that won't happen. eg.

#lp-foundry-container {
height: 940px;
}

The same thing does not happen on the first click, because you do the hide and show instantaneously. If you were to change

$('#heroNoColor').show();

to

$('#heroNoColor').fadeIn('fast');

Like it is on the close function, then the same thing would happen on first click.

Answer 2

Try this

---

JQuery

$(document).ready(function(){
        $('h1').animate({"right":"147px"},3000);
        $('.more').toggle(
                function(){
                    $(this).css({
                        'z-index':'100',
                        'background-position': '41px 0px'
                        });
                    $('#heroFullColor').hide();
                    $('#heroNoColor').show();
                    $('div.' + $(this).attr('id')).fadeIn('fast');
                    $('.more').not(this).hide();
                },
                function(){
                    $(this).css({
                        'background-position': '0px 0px'
                            });
                    $('div.' + $(this).attr('id')).fadeOut('fast');                 
                    $('#heroNoColor, .infoWindow').hide();
                    $('#heroFullColor').fadeIn('fast');                 
                    $('.more').not(this).show();
                });

                //What I added
                $(".more").click(function()
                {
                    var div = $(this);
                    $(window).scrollTop(div.offset().top).scrollLeft(div.offset().left);
                });
    });

Basically you are just taking the current top and left positions of the clicked div and setting the page to position itself at that point once you are done.

Fiddle Demo

BTW this is a pretty cool idea, Nice job!