jquery toggleClass, removeClass

Solved:

Thanks to eveyrone that tryed to help

Added this code and it worked:

$(function() {
$( ".itemContainer" ).click(function() {
    $(this).toggleClass( "showtheitem", 800 ),
    $(this).prev(".itemContainer").toggleClass("hide"),
    $(".itemContainer").not(this).prev(".itemContainer").removeClass("hide"),    

     $(".itemContainer").not(this).removeClass("showtheitem");
    return false;
});}); 

You can see how it works at http://jsfiddle.net/JKnjz/3/

I want to add a class to a previous item on click and then after I click again the class to be removed. But I also want that class to be r开发者_StackOverflow社区emoved if I click on every other item and add a class just to previous item....

Will try to explain by code. I have 7 divs

<div class="itemContainer">1</div>
<div class="itemContainer">2</div>
<div class="itemContainer">3</div>
<div class="itemContainer">4</div>
<div class="itemContainer">5</div>
<div class="itemContainer">6</div>
<div class="itemContainer">7</div>

CSS:

.itemContainer {float:left;width:100px;height:100px;background:#000;margin:5px;color:#fff}
.hide {display:none;}
.showtheitem {width:200px;height:200px;}

Javascript:

$(function() {
    $( ".itemContainer" ).click(function() {
        $(this).toggleClass( "showtheitem", 800 ),
        $(this).prev(".itemContainer").toggleClass("hide"),
         $(".itemContainer").not(this).removeClass("showtheitem");
        return false;
    });
});    

So for example if I click on div number 2 it adds class "hide" to div no. 1. If I click on div no. 2 it removes that hide class. That part is ok.

But I have a problem with if click on div no. 2 it add class of "hide" to div no. 1 and if i click for example on div no.6. class "hide" still remains on div. no 1.

I want class "hide" to be removed if I click on every other div.

here you can see how it works jsfiddle.net/JKnjz/1

I hope I gave clear example :)

Refer the demo link........,:)

http://api.jquery.com/toggleClass/

I am not sure what your wanted behaviour is actually, but removing the 'hide' class isn't that hard. you can do it like this:

$(function() {
    $( ".itemContainer" ).click(function() {
        $(this).toggleClass( "showtheitem", 800 );
        $('.itemContainer.hide').removeClass('hide');
        $(this).prev(".itemContainer").toggleClass("hide");
        $(".itemContainer").not(this).removeClass("showtheitem");
        return false;
    });
});    

the key is to remove the 'hide' class of all hidden items before you start hiding the div you want. After first unhiding all, then hiding the one you want, only that one will be hidden.

any other expected behaviour, would be best if you give more explanation on what exactly you want...

Like Sander, I can't quite understand what you're asking for. Below is another approach, I've taken away the "toggleClass" business because maybe it's the part that's confusing. It sounds like the rules you want are:

1. Only one item can have the class showtheitem at a time
2. The item "before" the current item with class showtheitem should have the class hide added to it

If I've understood you right, how does this look?

$(".itemContainer").click(function() {
    $(this).siblings('.itemContainer').removeClass('hide');
    $(this).prev(".itemContainer").addClass("hide");
    $('.showtheitem').removeClass('showtheitem');
    $(this).addClass( "showtheitem", 800 );
});

If I haven't understood, please leave a comment and we'll get there.

If I don't misunderstand, your goal is when user clicks item N:

• hide item N-1
• show all hidden item except N-1

Rights? So the answer is pretty clear:

$(function() {
    $( ".itemContainer" ).click(function() {
        $(".itemContainer.showtheitem").removeClass("showtheitem");
        $(this).toggleClass( "showtheitem", 800 )
        $(this).prev(".itemContainer").toggleClass("hide"),
        return false;
    });
});

do this

$(function() {
        $( "div.itemContainer").click(function() {
            $prevDiv = $(this).prev('div');
            $prevDiv.toggleClass('hide');
            $prevDiv.siblings().removeClass('hide');
            //return false;
        });
});

DEMO