CODEWITHSUNDEEP
javascriptjquerycss
user1447187
user1447187

Reputation: 85

jquery auto height fix

I have implemented jquery on the site (click the plus sign) http://pligg.marsgibson.info

click the first two stories first story has a gap when expanding while 2nd story doesnot how to set auto height for this jquery

here is my style.css

http://pligg.marsgibson.info/templates/wistie/css/style.css

I am trying to edit the .toggle_container .block

Upvotes: 1

Views: 377

Answers (2)

Wex
Wex

Reputation: 15695

First of all, you have a few HMTL no-no's. You can't have block-level elements within inline-level elements (<p> tags within <span> tags (you should replace <span> with </div>).

To fix your problem, replace

.toggle_container .block {
margin: 0px 10px 0px 75px;
padding: 0px 20px 0px 0px; /*--Padding of Container--*/
height:80px;
}

with (remove height:80px)

.toggle_container .block {
margin: 0px 10px 0px 75px;
padding: 0px 20px 0px 0px; /*--Padding of Container--*/
}

EDIT:

If you set the heights explicitly, I think it will animate better. Add this right after your as the first line of the inner function in the .ready() function:

jQuery(".toggle_container").each(function() {
    jQuery(this).height(jQuery(this).find(".block").height());
});

Upvotes: 0

Eric Fortis
Eric Fortis

Reputation: 17350

just remove the line height: 80px;

Upvotes: 1

Related Questions