Question

I´m useing a layout like http://masonry.desandro.com/methods.html#layout and is wondering if there is a way to only have one item active at them time. So that when you expand a new item a the one you currently have open goes back to its original form (removes class="is_expanded") . I´ve quite new to programming and don´t really know where to stat to look, tried configuring How do I remove class from previous selection when clicking additional item? but with no luck

Was it helpful?

Solution

classie.toggle( event.target, 'gigante' );

That is the part that does the magic - it adds a class 'gigante' which then makes it 4*4 (or whatever)

If you want to make only one be expanded at a time then

eventie.bind( container, 'click', function( event ) {
// don't proceed if item was not clicked on
if ( !classie.has( event.target, 'item' ) ) {
return;
}

// change size of item via class
 $('.item').removeClass('gigante'); // add this line
classie.toggle( event.target, 'gigante' );
// trigger layout
msnry.layout();
});

What the line I added does is remove all 'gigante' class from the items and then the toggle will add that class to the item again.

$('.item') is just a class that every item has.

This answer assumes that only expanded items will be called 'gigante'.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top