adding and removing a class upon slidetoggle

Question

I have created a 3 x 2 grid of squareish buttons that are monotone in colour. I have a slidetoggle div that pops down inbetween both rows of 3 and as it does so it pushes the content down of the rest of hte page, this is all working perfectly so far.

But i have made a class (.active) thats css is the same as the :hover state so that when i hover over a button the coloured version replaces the monotone version, however i have tried to add some js to make the colour (.active) stay on once i have clicked on a certain button so that you can see which button (product) the slidedown div relates to and the rest are still in monotone around it...

The .active code below works perfectly to turn the bottons colour on and off when you click that one button, but i have set it up so that if one button's div is open and you click on a different one, the open one closes and then the new one opens. This feature however throws off the balance of the code i have for the .active state here. When you have say button 1 open and you click button 1 to close, this works fine, the color goes on and then off, but if yo uhave button 1 open and click on button 2, button 1's div closes and opens button 2's div but then botton 1 stays in colour as button 2 turns to colour. the order is thrown off...

I need to add some js to say, that only one button can be in color (.active) at a time, or that if one is .active it must be turned off before the new one is turned on... Please help :)

$(document).ready(function(){

    $("a.active").removeClass('active');                      //<<this .active code &

        $("#product1").click(function(){

            if($(this).parent('a').hasClass('active')){           //<<<this .active code
                $(this).parent('a').removeClass('active');        //<<
                    }else{                                        //<<
                        $(this).parent('a').addClass('active');   //<<
                    }                                             //<<

                        $("#product2box").slideUp('slow', function() {
                        $("#product3box").slideUp('slow', function() {
                        $("#product4box").slideUp('slow', function() {
                        $("#product5box").slideUp('slow', function() {
                        $("#product6box").slideUp('slow', function() {
                            $("#product1box").stop().slideToggle(1000);
                                                                         //do i need
                                                                   //something here??
                        });
                    });
                });
            });
        });
    });

And here is the HTML

<div id="row1">
        <a href="#!" class="active"><span id="product1">
            <div id="productblueheader">
                <div id="productlogosblue1"></div>
            </div>
            <div id="productstitle">Stops all spam and unwanted email.</div>
            <div id="producttext">With over 8 million users ******* is the leading in anit-spam software on the market today! Sort all your spam issues in one place now!</div>
        </span></a>
        <a href="#!" class="active"><span id="product2">
            <div id="productblueheader">
                <div id="productlogosblue2"></div>
            </div>
            <div id="productstitle">The easiest email encryption ever.</div>
            <div id="producttext">In todays world, we won’t enter personal details in to untrusted websites, but we send personal information via regular (insecure) email all the time.</div>
        </span></a>
        <a href="#!" class="active"><span id="product3">
            <div id="productblueheader">
                <div id="productlogosblue3"></div>
            </div>
            <div id="productstitle">The easiest email encryption ever.</div>
            <div id="producttext">****** is a revelation in security and ease of use. Get the best protection against viruses, spyware, scam websites and other threats.</div>
        </span></a>

    </div>

(then the same for row2 products 4-6)

Answer 1

$(document).ready(function() {
    $(".producthandler").click(function() {
        var ctx = $(this);
        var productboxId = ctx.children().eq(0).attr("id");

        ctx.toggleClass('active');
        $("#" + productboxId + "box").stop().slideToggle(1000);

        $(".producthandler").each(function() {
            var ctx = $(this);
            var producthandlerId = ctx.children().eq(0).attr('id');

            if (productboxId !== producthandlerId) {
                ctx.removeClass('active');
                $("#" + producthandlerId + "box").slideUp(1000); 
            }   
        });
    });
});

Answer 2

This ought to work, but I couldn't test it without the relevant HTML:

$(document).ready(function () {
    $("#product1").click(function () {
        $("a.active").removeClass('active');
        $(this).parent('a').toggleClass('active'));        
        $("#product2box").slideUp('slow', function () {
            $("#product3box").slideUp('slow', function () {
                $("#product4box").slideUp('slow', function () {
                    $("#product5box").slideUp('slow', function () {
                        $("#product6box").slideUp('slow', function () {
                            $("#product1box").stop().slideToggle(1000);
                        });
                    });
                });
            });
        });
    });
});

Also, there would probably be a better way to write all those sliding up functions. Do they really need to go on by one by the way?

Answer 3

you use .each() method of jquery and find .active class to remove it, and then add .active class.

$(this).parent('a').each(function(){
$(this).removeClass('active');
});
$(this).parent('a').addClass('active');