Collapsible menu and IE 11

I was using an outline java script for expanding / collapsing menus. My code is working perfectly in IE 9 and IE 10. In IE 11, the page displays with all menus expanded. Is there a solution for expanding / collapsing menus that will work in all browsers?
Collapsible.txt
Outline.txt
Malloy1446Asked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
I'll use the fiddle example, I'm sure you can take this then and just add your own menu
This is a full working example, just pop into an html file and load in the browser
<!doctype html>
<html>
<head>
<style>
ul{
    margin:3px;
    border:1px solid red;  
}
ul ul{
    display:none;   
}
ul li:hover>ul{
    /*display:block;   */
}
</style>
</head>
<body>
<ul>
    <li>
        level 2
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <li>
        level 2
        <ul>
            <li>
                level 3
                <ul>
                    <li>c</li>
                    <li>d</li>
                </ul>
            </li>
            
            <li>e</li>
            <li>f</li>
        </ul>
    </li>
</ul>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('li').click(function(ev) {
    $(this).find('>ul').slideToggle();
    ev.stopPropagation();
});
})
</script>
</body>
</html>

Open in new window

0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
if you're ok with changing your code and using jQuery, then I would recommend jQuery's accordian plug-in:

http://jqueryui.com/accordion/

It's pretty simple to use and set up, and it works in all major browsers
0
 
GaryCommented:
Where did you get that code - it is ancient!
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
GaryCommented:
Code also does not work in Chrome or Firefox, reason it doesn't work in IE11 is because IE11 does not report itself in the same way as earlier versions of IE (MSIE).
Since the code is defunct as far as the 21st century is concerned you would be better off taking Monty's advice or search for more updated code that is not over 10 years old.

Here's a jQuery version
http://jsfiddle.net/SacWm/80/

jQuery is a javascript framework used in over 50% of all websites to make cross browser js coding really simple.
0
 
Malloy1446Author Commented:
Cathal: this is exactly what I want to do, but I am not sure how to implement the jQuery. Never used before!
0
 
Malloy1446Author Commented:
Works like a charm. Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.