first time asking a question in here but I have found answers in the website so many times before.
My question is why this code is not working in IE, works perfectly in Chrome. I read the other topic similar to this one, but the answer there is to replace the toggle with if .show .hide. That's not what I want to do, I want to use toggle and I just don't seem to understand why IE doesn't like it. This works a bit like a menu and its a list of services a company offers and the toggle is a div with details about the service. I know that div tags are ok in li tags so it shouldn't be that, the reason I am using divs is because I am using a lot of CSS to style it, although it could be done in a smarter and cleaner way... I know there are very similar questions to this, but I couldn't find the answer why my code isn't working in IE9. I would appreciated if someone helps me, thank you! :)
HTML
<div id="text">
<ul id="serv">
<li><div class="head"><a href="#">SERVICE1</a></div>
<li><div class="cont">
<p>CONTENTS <p>
</div></li>
</ul>
</li>
<li><div class="head"><a href="#">SERVICE2/a></div>
<ul>
<li><div class="cont">
<p>CONTENTS2</p>
</div></li>
</ul>
</li>
</div>
SCRIPT
$(document).ready(function(){
$( '#serv > li > ul' )
.hide()
.click(function( e ){
e.stopPropagation();
});
$('#serv > li').toggle(function(){
$(this)
.find('ul').slideDown();
}, function(){
$( this )
.find('ul').slideUp();
});
});
.toggle()
wrong. Read the docs: api.jquery.com/toggle