Click and stay in same position when some element above hide

Question

Demo : http://jsfiddle.net/My29d/

I have content like this #1, #2, #3, #4 and more...

When I click readmore #2 and click readmore #1, it's ok because hidden content expand below and window stay in same position.

But when I click readmore #1 and scoll to content #2 so click on readmore #2

expanded content #1 will hide and content #2 will show full content.

So window position doesn't stay in same position right ?

I have no idea how to do.

Maybe use scroll to current expanded element ?

more_btn.on('click', function () {
    more_btn.show();
    more_content.hide();
    $(this).hide().next('div').show().css('display', 'inline');
});

PS : If this question is bad unstanding, I'm sorry and tell me to expand.

Answer 1

I'm done now :

var more_btn = $('div > span');
var more_content = $('div > div');

more_btn.on('click', function (e) {
    var $this = $(this);
    var top = e.pageY - $(window).scrollTop();
    more_btn.show();
    more_content.hide();
    $(this).hide().next('div').show().css('display', 'inline');
    $('html, body').scrollTop(
        $this.next('div').offset().top - top
    );

});

Demo : http://jsfiddle.net/My29d/4/

Answer 2

I'm not sure if i understand what you exactly want, but if i understand correctly then this might what you are looking for:

var more_btn = $('div > span');
var more_content = $('div > div');

more_btn.on('click', function () {
    more_btn.show();
    more_content.hide();
    $(this).hide().next('div').show().css('display', 'inline');
    $('html, body').animate({
        scrollTop: $(this).parent('div').offset().top
    }, 500);
});

demo : http://jsfiddle.net/My29d/1/