CODEWITHSUNDEEP
jqueryhtmlinternet-explorer-9toggle
user1610509
user1610509

Reputation: 1

jQuery .toggle function not working in IE9

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();
  });
});

Upvotes: 0

Views: 1399

Answers (1)

Jared Farrish
Jared Farrish

Reputation: 49208

Totally interpreting your markup, which is messy and invalid:

<div id="text">
    <ul id="serv">        
        <li><div class="head"><a href="#">SERVICE 1</a></div></li>
        <li>
            <div class="cont"><p>CONTENTS </p></div>
            <ul><li>sub list</li></ul>
        </li>
        <li><div class="head"><a href="#">SERVICE 2</a></div></li>
        <li>
            <div class="cont"><p>CONTENTS 2</p></div>
            <ul><li>sub list</li></ul>
        </li>
    </ul>
</div>

$(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();
    });
});

http://jsfiddle.net/userdude/tCFCJ/5

Click on the CONTENTS text to see the slide up/down functionality.

Upvotes: 1

Related Questions