Question

I’ve gut a simple function in my page for hiding/showing panes when some tabs are clicked. Simplest thing in the world, right?

Works perfectly in Firefox and Chrome, but in IE it only half works. It will hide all the sopMonthContainers, but fails to find the container with a matching ID and display it.

 $('.sopTab').click(function(e){
    if ($(this).hasClass("activeTab") === false){
        $(".sopTab").removeClass("activeTab");
        $(this).addClass("activeTab");
        };
    var selectionID = $(this).attr("id");
    $(".sopMonthContainer").css("display", "none");
    $(".sopMonthContainer#the"+selectionID).css("display", "block");
 });

I’m hoping it isn’t some stupid typo that I’ve overlooked, but I’ve been staring at this thing for nearly an hour trying different variations on the theme. I’ve tried reworking the selector IDs to make sure they’re unique (hence the “the” in the selector on the last line), I’ve tried selecting using only ID, I’ve tried using different methods to hide/show… same result no matter what.

EDIT: the relevant markup. It’s got some coldfusion elements, anything between ##’s is a coldfusion variable.

<div class="sopTab" id="sopContainer#DateFormat(pubdate,'mmmm')#" style="">
    #DateFormat(pubdate,"mmmm")#: <span id="sum#DateFormat(pubdate,"mmmm")#">0</span>
</div>

<cfoutput query="GetProductBasicInfo">
    <div class="sopMonthContainer" style="display:none;" 
    id="theSopContainer#DateFormat(pubdate,'mmmm')#">
        [div content goes here]
     </div>
</cfoutput>

Answer 1

Note for example this:

<div class="sopTab" id="sopContainerNovember" style="">November: <span id="sumNovember">0</span></div>

<div class="sopMonthContainer" style="display:none;" id="theSopContainerNovember">

when you click on sopTab, the selector you build is

#thesopContainerNovember
//  ^  

but the ID of the target is

#theSopContainerNovember
//  ^

the IDs did not match(it’s the uppercase and lowercase s )