jquery toggleClass, removeClass

Question

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 removed 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 :)

So on any click, `hide` is removed from all the others, but it must be on the one just before the current one? and any clicked item should get the class `showtheitem` added to it. Is that right? — artlung, Oct 07 '11 at 00:25

score 1 · Answer 1 · answered Nov 21 '12 at 06:23

1

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

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

answered Nov 21 '12 at 06:23

Vineet Kadkol

321
3
5

score 0 · Answer 2 · answered Oct 07 '11 at 00:17

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...

score 0 · Answer 3 · answered Oct 07 '11 at 00:32

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:

Only one item can have the class showtheitem at a time
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.

score 0 · Answer 4 · answered Oct 07 '11 at 11:46

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;
    });
});

score 0 · Answer 5 · answered Oct 07 '11 at 12:27

do this

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

jquery toggleClass, removeClass

5 Answers5

DEMO