Question

Sandbox code below (using the jQuery Isotope layout and sorting plugin). What shall happen:

1. If an .item is clicked, it shall grow to reveal more of its content (.maximise)
2. If that same .item is clicked again, it shall shrink to hide most of its content (.minimise)

3. If any other .item is clicked, it shall do 1. and all others shall do 2.

   $items = $('.item'); // solution
   
   $('.item').click(function () {
   
   var $this = $(this);
   var $previousSelected = $('.selected');
   
   if ($(this).hasClass('selected')) {
   
       $items.not(this).find('.slideshow').removeClass('transparent'); // solution
   
       $(this).removeClass('selected');
       $(this).children('.maximise').hide();
       $(this).children('.minimise').show();
   
   } else {
   
       $items.not(this).find('.slideshow').addClass('transparent'); // solution
   
       $previousSelected.removeClass('selected');
       $previousSelected.children('.minimise').show();
       $previousSelected.children('.maximise').hide();
   
       $(this).addClass('selected');
       $(this).children('.minimise').hide();
       $(this).children('.maximise').show();
   }
   
   // $container.isotope('shuffle'); uncomment to always randomise layout
   // $container.isotope('reLayout'); uncomment if no sorting logic is used
   $container
   .isotope('updateSortData', $this)
   .isotope('updateSortData', $previousSelected)
   .isotope();
   });
   

Thanks a lot in advance!

EDIT Found .find(). and then .not() methods and then realised to just store all Isotope elements in $items = $(‘.item’);

Answer 1

You can do this with jQuery’s addClass method. jQuery will check to see if the .transparent class is already set on the element before it adds it in.

$($previousSelected).children('.minimise').addClass('transparent').show();

You may also want to remove the transparent class when you hide it, in which case I would remove the class after .hide():

$($previousSelected).children('.maximise').hide().removeClass('transparent');