Question

I’ve played around on here enough to get this to where it is now, but I need a little help getting over the hurdle… like everyone I suppose!

I’m trying to make it so when you click a link (.clickable) it changes the width from span3 to span6.

The .clickable link is inside of a div, which is the one the class needs changed – .block is what I’m using in isotope for the item selector.

The link:

<a class="clickable" href="#enlarge-article"><i class="icon-fullscreen"></i>&nbsp;&nbsp;<strong>Enlarge</strong></a>

Javascript :

var $container = $('#portfolio');   
$container.delegate( '.block', 'click', function(){
      $(".block").removeClass('span3').addClass('span6').siblings().removeClass('span6').addClass('span3');
  $container.isotope('reLayout');
});

updated class typo – is as appears in .js now

Answer 1

Try this:

var $container = $('#portfolio');   
$container.delegate( '.block', 'click', function(){
    $(".block").removeClass('span6').addClass('span3');
    $(this).removeClass('span3').addClass('span6');
    $container.isotope('reLayout');
});