CODEWITHSUNDEEP
jqueryaddclass
Greg
Greg

Reputation: 33

jQuery add class remove when another is clicked

Having issues returning element to its start position after next item clicked.

When the user hovers over the div.box two element transition in, when that element is clicked the elements should stay in place. This works fine when the same item is clicked on/off. The issue is when the next item is clicked the span stays centered within the a.blanket.

code: http://jsfiddle.net/MhLwH/3/

HTML: 

<div class="box">
    <div class="img"></div>
    <a href="" class="blanket">
        <span class="arrow"></span>
    </a>
</div>

<div class="box">
    <div class="img"></div>
    <a href="" class="blanket">
        <span class="arrow"></span>
    </a>
</div>

CSS:

.box {
    width:200px;
    height:200px;
    background:red;
    float:left;
    margin-left:10px;
    margin-top:50px;
    position:relative;
    /*overflow:hidden*/
}
.blanket {
    width:100%;
    height:100%;
    position:absolute;
    top:100%;
    left:0;
    background:blue;
}
.blanket, .arrow {
   -webkit-transition: all 0.3s ease-in; 
}
.arrow {
    display:block;
    width:100px;
    height:100px;
    position:relative;
    background:black;
    top:-300px;
    z-index:9999;
}
.box:hover .blanket {
    top:0;
}
.box:hover .blanket span {
    top:53px;
}
.active {
    top:0;
}
.activeArrow {
    top:53px;
}

JS: 

$('.box').find('a').click(function (e) {
    e.preventDefault();
        var $this = $(this);

        if ($this.is('.active')) {
            $this.removeClass('active');
            $this.find('span').removeClass('activeArrow');

        } else {
            $('a.active').removeClass('active');
            $this.addClass('active');
            $this.find('span').addClass('activeArrow');
        }
});

side note I know the transition is only targeting webkit for now

Upvotes: 2

Views: 326

Answers (3)

optimisticupdate
optimisticupdate

Reputation: 1689

The solution was already given to you, but I like to share my shorter version with you.

$('.blanket').on("click", function(event){
    var $this = $(this);
    $this.toggleClass('active').find('span').toggleClass('activeArrow');
    return false;
});

Fiddle

Upvotes: 1

andi
andi

Reputation: 6522

I think you forgot this line:

$('span.activeArrow').removeClass('activeArrow');

Upvotes: 1

Jason M. Batchelor
Jason M. Batchelor

Reputation: 2951

Is this what you're looking for? http://jsfiddle.net/csFBA/

Not precisely certain what was causing your issues, but things become clearer when you set up your code a little more cleanly...

// You really don't need to do a find('a') here... use the proper selector
$('.box a').click(function (e) {
    e.preventDefault();
        var $this = $(this);
        // Only do one call to get the active state
        var blnActive = $this.hasClass("active");
        // now remove the active class from this item
        $this.removeClass("active");

        if (blnActive) {
            $this.find('span').removeClass('activeArrow');
        } else {
            $this.addClass('active');
            $this.find('span').addClass('activeArrow');
        }
});

Wasn't quite clear from your description what your exact issue was, but maybe cleaning up your jQuery will get you closer to where you want to be.

Upvotes: 0

Related Questions