querySelector does not work with IE 9

Question

I am trying to have collapse expand left panel functionality in my page which has a left and a right nav panel. The left panel collapses but the new container class is not set. The structure looks like this:

<div class="contentContainer">

    <div class="leftNavPanel">
        <div>

        </div>
    </div>


    <div class="openClose" id="openClose">
        <div class="leftPanelClose">
            <a class="expandCollapseAnchor" href="javascript:collapseExpand()"><i class="fa fa-angle-double-left" id="expandCollapseIcon"></i></a>      
        </div>

    </div>

    <div class="rightNavPanel">
        <div>

        </div>
    </div>

    <div class="clearBoth"></div>

</div>

My javascript looks something like this:

function collapseExpand(){

var left = document.querySelector("div.leftNavPanel");
var oc = document.querySelector("div.openClose");
var rP = document.querySelector("div.rightNavPanel");
var cont = document.querySelector(".contentContainer, .contentContainerNoLeftNavPanel");
var ic = document.getElementById("expandCollapseIcon");

if (left.style.display!="none")
{
left.style.display="none";
oc.style.marginLeft="0px";
rP.style.marginLeft="20px";
cont.classList.add("contentContainerNoLeftNavPanel");
cont.classList.remove("contentContainer");
ic.classList.remove("fa-angle-double-left");
ic.classList.add("fa-angle-double-right");
}
else
{
left.style.display="block";
oc.style.marginLeft="290px";
rP.style.marginLeft="310px";
cont.classList.add("contentContainer");
cont.classList.remove("contentContainerNoLeftNavPanel");
ic.classList.remove("fa-angle-double-right");
ic.classList.add("fa-angle-double-left");
}

}

Only problem is that querySelector does not accept two class names as arguments for old browsers(<=IE9) at least that's what I think the problem is. Can someone tell me what's happening here? This seems to work fine with latest chrome and IE > version 9

score 0 · Answer 1 · answered Aug 28 '14 at 19:01

0

I guess your problem is cont.classList not being supported by IE9 or older

answered Aug 28 '14 at 19:01

Volune

4,324
22
23

Yeah, I just figured that out. I'm using += for adding the classes. How do I remove classes? – streetsoldier Aug 28 '14 at 19:10
Have a look at [Adding and Removing Classes, with simple cross-browser JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript/196038#196038) – Volune Aug 28 '14 at 19:14

querySelector does not work with IE 9

1 Answers1