Q:

Changing div class within set

I have the following html and I want to change the divs around onclick.  For example:   
Initial
<div class="box1">Story 1</div>
<div class="box2">Story 2</div>
<div class="box2">Story 3</div> 
<div class="box2">Story 4</div>  

When I click on Story 2, it becomes
<div class="box2">Story 1</div>
<div class="box1">Story 2</div>
<div class="box2">Story 3</div> 
<div class="box2">Story 4</div>  

So .. whichever div is clicked will take the property of box1 and the others will become box2.  Is it possible?

A:

One more possible solution with toggleClass() method:
$("div").on("click", function() {
    $(this)
        .siblings(".box1")
        .andSelf()
        .toggleClass("box1 box2");
});

DEMO: http://jsfiddle.net/x8vxh/

A:

Something like this perhaps:
$('.box1, .box2').click(function() {
    $('.box1').addClass('box2').removeClass('box1');
    $(this).addClass('box1').removeClass('box2');
});

It might be neater to have one box class for all boxes, and one active class that you add and remove, and the latter class could override the properties of the former. Would save you the trouble of toggling two different classes.

