jquery script not working in ie7

Question

Hi there. I have the following jquery that I wrote:

$(document).ready(function(){

    $('div.contentTxtBox#home').addClass('current').show();

    $('a.menu').click(function() {

    $('div.contentTxtBox.current').hide("slide", { direction: "left" }, 700).removeClass('current');
    $('div.contentTxtBox#' + this.id).show("slide", { direction: "right" }, 700).addClass('current');
    $('a.menu.current').removeClass('current');
    $(this).addClass('current');

    return false;

    });

});

Here's my CSS:

.contentTxtBox {
    padding:20px;
    width:321px;
    height:330px;
    background:#E0E0DB;
    position:absolute;
    display:none;
}
.contentTxtBox.current {
    display:block;
}

So it's working in every browser except ie7. In addition to this .js, I'm also using bxslider.js and spry accordions js.

Any suggestions? I'd be happy for it simply to appear, rather than slide across.

Many TIA :-)

Answer 1

with this line,

$('div.contentTxtBox#' + this.id).show("slide", { direction: "right" }, 700).addClass('current');

this proves you have duplicate id's, which is not valid html. IE seems to hate that.. ;)

Answer 2

Had menu buttons: .button#home, which corresponded to .contentTxtBox#home.

Renamed .contentTxtBox ids with a prefix of "ctb": .contentTxtBox#ctbhome.

Thanks everyone for this! Had no idea it was bad!