Animated Collapsible DIV v2.4 jumping on expand and collapse

[Skinnybobb]

1) Script Title:
Animated Collapsible DIV v2.4

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem:
When I add a margin-bottom attribute to my collapsible div it results in the div jumping at the top when expanding or collapsing. Any ideas anyone?

	#profilesearchdiv, #profilefilterdiv {
		display:none;
		background: #eeeded;
		overflow: hidden;
		color: #58584D;
		width:667px;
		margin-bottom:10px;
	}
	.profilecollapsedivholder {
		padding:5px 5px 7px 9px;
		margin-bottom: 8px;
	}

				<div id="profilesearchdiv">
                <div class="profilecollapsedivholder">
                To search the profiles enter a search term and hit "Search".
				<form action="#">
					<input type="text" name="searchprofile" class="enewsbox" />
					<input type="button" class="button" value="Search" />
				</form>
                </div>
				</div>
                
				<div id="profilefilterdiv">
                <div class="profilecollapsedivholder">
                Select filter options then hit "Filter".
				<form action="#">
					<select name="filterprofileselect">
                    	<option value="">Choose a filter</option>
                    	<option value="http://www.yahoo.com/">A Scotland</option>
                    	<option value="http://www.google.com/">B North East</option>
                    	<option value="http://www.altavista.com/">C Northern Ireland</option>
                    	<option value="http://www.amazon.com/">D Yorkshire &amp; The Humber</option>
                    	<option value="http://artlung.com/">E North West</option>
                        <option value="http://artlung.com/">F Wales</option>
                        <option value="http://artlung.com/">G East Midlands</option>
                        <option value="http://artlung.com/">H South East</option>
                        <option value="http://artlung.com/">J West Midlands</option>
                        <option value="http://artlung.com/">K London</option>
                        <option value="http://artlung.com/">L East of England</option>
                        <option value="http://artlung.com/">M South West</option>
					</select>
                    &nbsp;
					<input type="button" value="Filter" />
				</form>
                </div>
                </div>

[ddadmin]

Does your page contain a valid doctype at the very top? Please post a link to the page on your site that contains the problematic script so we can check it out.

[Jk_]

Does your page contain a valid doctype at the very top? Please post a link to the page on your site that contains the problematic script so we can check it out.

Hello there,

I have exactly the same problem.

I'm using your wonderful plugin on a work in progress Wordpress template.

The DIV that I want to toggle has a 45px padding apply to it.

The toggle works but jump the padding.

Click on What We do? to toggle the div.

I have a valid document type at the very top of my page.

Here is a link to the wip page : http://www.thelbc.be/wip/


Thanks for your time and your patience.

Cheers,


JK_

[Skinnybobb]

Yeah its got a valid doc type.

Unfortunately its on my works intranet so you cant access it.

M

[Skinnybobb]

Hello there,

I have exactly the same problem.

I'm using your wonderful plugin on a work in progress Wordpress template.

The DIV that I want to toggle has a 45px padding apply to it.

The toggle works but jump the padding.

Click on What We do? to toggle the div.

I have a valid document type at the very top of my page.

Here is a link to the wip page : http://www.thelbc.be/wip/


Thanks for your time and your patience.

Cheers,


JK_

Hiya,
I've looked at yours and it seems ok. (In Firefox on Mac). My problem appears on all browsers?! (That i've tested that is)

[Jk_]

@Skinnybobb : Don't you see the animation jumping at half way?

I tried under FF3 on MAC & PC and IE6,7,8 on PC and I have the problem everywhere...

[Skinnybobb]

@JK: Wow, thats odd it didn't do that when I first looked!!

Sb

[Jk_]

Seriously man, it drives me crazy! I can't find out what I'm doing wrong.

Any help would be really appreciated.

Jk_

[Jk_]

I tried everything but I still got the problem :

http://www.thelbc.be/wip/

[ddadmin]

Looking at the issue, I'm not sure the right approach is to "fix" something within the script. The problem occurs basically because you've added "margin-bottom" to the DIV that's being collapsed- once the DIV is fully collapsed, it essentially disappears from the page, including the margin you've defined for it. When the margin disappears, that's when the "jumping" occurs.

Are you able to apply the margin to an element following the collapsible DIV, thus avoiding this issue?