Question

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

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!