Sorry for the late reply.
Yes, what you’re doing is similar to mine except I have more div’s on the page that represent “panels” with content and you want to resize a div on the left rather than on the right side. Beyond that it seems similar.
First of all I think your problem rests in the order in which your code runs. Here’s the accordion code below, the _index in the name is just to mean that accordion is on the index page (since I have more elsewhere through the side and I like easy names etc.).
$('.accordion_trigger_index').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.accordion_trigger_index').removeClass('active').next().slideUp();
$(this).toggleClass('active').next().slideDown(function() {
//scroll to top of id7 div accordion trigger (first from top)
goToByScroll('h2.accordion_trigger_index');
});
}
return false; //prevent the browser jump to the link anchor
});
Notice that I am first sliding down the next container after the trigger and only once that is done am I calling a function that resizes the div I want, in this case it’s one 243px wide hence the name. The next container in the accordion just for checks is the one that holds your content.
After that we go onto the resize code which looks like this:
function resize_announcement_243_div() {
//Resizes div id8 height so it aligns with div id9
$(document).ready(function(){
//get top position announcement div id7
var top_div = $( ".annoucement-top-880.id7" );
var top_div_offset = top_div.offset();
var top = top_div_offset.top;
//get bottom most position of annoucement div id9
var bottom_div = $( ".annoucement-bottom-880.id9" );
var bottom_div_offset = bottom_div.offset();
var bottom = (bottom_div_offset.top + bottom_div.height());
//calculate how tall the announcement div should be
var height = (bottom - top);
//announcement div id8 has additional top padding to take into account when calculating its height
height = height - 20;
//resize announcement div id8 content area
var div = $( ".annoucement-content-243.id8" );
var startHeight = div.height();
var endHeight = height;
div.height( startHeight ).animate({ height: (endHeight - (top_div.height() + bottom_div.height()) )});
});
Each of my “panels” I call announcements and each is made up of three divs, a top div, a content div and a bottom div. This is just so I can style them.
Notice I am getting the top y position of the top most part of the top div and then getting the same top position of the bottom div but also taking into account its height since I need the far most down y position.
Once I have this I know I can calculate how tall the page has grown and animate the div I want to animate (that’s beside the accordion) to the new height. The padding - 20 is just there since I have a top-padding: 20px in that div so content doesn’t appear too near the top.
From what I can see you don’t want to be getting the new height of your accordion but rather the div in which it’s contained (the parent div). If you have it setup like me (top div, content div, bottom div) then the content div will resize automatically. Use this to your benefit (work with the flow so to speak).
goToByScroll() is just a function call I have to change the viewport once the accordion performs its resize, this is because some content is rather long and if a user clicks a lower accordion trigger it’s somewhat annoying to have to manually scroll up the page. I do this automatically to improve the overall user experience.
That should help you.