Forums

soap

Howdy,

I need some help!

I have this:

$(document).ready(function() {
	$(".toggle_container").hide();
	
	$("h2.trigger").click(function() {
		$(this).toggleClass("active").next().slideToggle(300);
		return false;
	});
});

Applied to this:

<h2 class="trigger" id="sn1"></h2>
<div class="toggle_container">
<h2>Marketing Consulting</h2>
<p>Expert marketing consulting to guide your way, troubleshoot and help you come up with sound strategy and marketing planning. As well as being included in many of our marketing packages, marketing consulting is offered separately in blocks of hours or on a project basis. </p>
</div>
                            
<h2 class="trigger" id="sn2"></h2>
<div class="toggle_container">
<h2>Marketing Analysis </h2>
<p>We offer an analysis of your current marketing. This is an extensive evaluation of your marketing messaging and imagery, your print and Internet marketing, where applicable, your results and your markets.</p>
</div>

with this CSS:

h2.trigger {
	background:url(../images/service-nav-sprite.png) no-repeat scroll top left;
	cursor:pointer;
	display:block;
	margin:10px 0 0 0; padding:0;
	width:701px;height:41px;
}

.toggle_container {
	background-image:url(../images/serv-content-bg.png);
	background-repeat:repeat;
	border:1px solid #dddddd;
	padding:8px 10px;
}

I'm looking at it in IE 8 and when you click one of the boxes, it expands but when you click it again to close it, it collapses but loses the top margin. It works fine in FF and Chrome.

Obviously it's meant to retain the margin:10px 0 0 0; declared in h2.trigger {}

Don't know why... Here is a link to the problem: http://websitesthatmarket.com/tpo/test/

soap

I hope this post doesn't get lost in oblivion!

soap

well i guess this one is too hard for jamy_za and TheDoc :)

TheDoc

haha sorry, Soap - I am no JQuery expert. But here's an extra little bump for you!

Also, you can always grab Jamy's attention by putting his name like this: @jamy_za - hi Jamy!

soap

I looked around the web and apparently this is an IE8 bug and people say they've fixed it with overflow:hidden but this didn't work for me..

jamy_za

Hi Gray =)

@soap, IE has problems every so often, instead of trying figure out exactly why something is happening, sometimes it's best just to change the way you're doing it.

Try this kind of markup:

<ul id="toggle-containers">
	 <li>  
	 	 <h2 class="trigger" id="sn1"></h2>
		 <h3>Marketing Consulting</h3>
	 	 <p>Expert marketing consulting to guide your way, troubleshoot and help you come up with sound strategy and marketing planning. As well as being included in many of our marketing packages, marketing consulting is offered separately in blocks of hours or on a project basis.</p>
	 </li>
	 <li>                       
	 	 <h2 class="trigger" id="sn2"></h2>
	 	 <h3>Marketing Analysis </h3>
	 	 <p>We offer an analysis of your current marketing. This is an extensive evaluation of your marketing messaging and imagery, your print and Internet marketing, where applicable, your results and your markets.</p>
	 </li>
</ul>

$(document).ready(function() {
        $("#toggle-containers li").css('height', '40px');
        
        $("h2.trigger").click(function() {
	 	if($(this).parent().hasClass("active")){
	 		 $(this).parent().removeClass("active").animate({height: '40px'});
	 	 }
	 	 else{
               		 $(this).parent().toggleClass("active").animate({height: '100%'});
	 	 }
                return false;
        });
});

I haven't tested the js and it could be optimized, but you get what I mean.
And add the margin to the li's

soap

I will give it a shot tonight and let you know how it goes. Thanks a lot! :)

treehouse : what would you like to learn today?

Forums

Margin disappearing on slideToggle in IE