Collapsible menu and IE 11

Posted on 2014-01-30
Medium Priority
Last Modified: 2014-01-30
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?
Question by:Malloy1446
  • 3
  • 2
LVL 34

Expert Comment

by:Big Monty
ID: 39821387
if you're ok with changing your code and using jQuery, then I would recommend jQuery's accordian plug-in:


It's pretty simple to use and set up, and it works in all major browsers
LVL 58

Expert Comment

ID: 39821427
Where did you get that code - it is ancient!
LVL 58

Expert Comment

ID: 39821526
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

jQuery is a javascript framework used in over 50% of all websites to make cross browser js coding really simple.
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.


Author Comment

ID: 39821721
Cathal: this is exactly what I want to do, but I am not sure how to implement the jQuery. Never used before!
LVL 58

Accepted Solution

Gary earned 2000 total points
ID: 39821746
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>
    border:1px solid red;  
ul ul{
ul li:hover>ul{
    /*display:block;   */
        level 2
        level 2
                level 3

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(function() {
$('li').click(function(ev) {

Open in new window


Author Closing Comment

ID: 39822166
Works like a charm. Thanks!

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

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.

Join & Write a Comment

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question